uniapp 实现小程序中自定义tabBar

uniapp 实现小程序中自定义tabBar 的方法

第一种方式: page.json中配置

"tabBar": {
  "color": "#7A7E83",
  "selectedColor": "#007AFF",
  "borderStyle": "black",
  "backgroundColor": "#F8F8F8",
  "fontSize": "12px",
  "spacing": "5px",
  "height": "50px",
  "list" : [
    {
      "pagePath": "pages/index/index",
      "text": "头像",
      "iconPath": "static/down.png",
      "selectedIconPath": "static/down.png"
    },
    {
      "pagePath": "pages/bizhi/index",
      "text": "壁纸",
      "iconPath": "static/bizhi.png",
      "selectedIconPath": "static/bizhi.png"
    },
    {
      "pagePath": "pages/zhenjian/index",
      "text": "证件照",
      "iconPath": "static/zhenjian.png",
      "selectedIconPath": "static/zhenjian.png"
    },
    {
      "pagePath": "pages/zhenjian/index",
      "text": "头像易",
      "iconPath": "static/txy.png",
      "selectedIconPath": "static/txy.png"
    }
  ]
},

定义的内容需要在pages 中声明了。

这种方式定义比较快速，简单。
如果需要根据用户权限，或者在tabBar 上自定义一些逻辑，需要使用自定义的内容

第二种方式 自定义内容

<template>
  <view class="tab-bar">
    <view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
      <image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
      <view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      selected: { // 当前选中的tab index
          type: Number,
          default: 0
      },
    },
    data() {
      return {
        color: "#333333",
        selectedColor: "#d4237a",
        list: [
          {
            "pagePath": "pages/index/index",
            "text": "头像",
            "iconPath": "https://bj.bcebos.com/txy-dev/txy/main/down.png",
            "selectedIconPath": "https://bj.bcebos.com/txy-dev/txy/main/down.png"
          },
          {
            "pagePath": "pages/bizhi/index",
            "text": "壁纸",
            "iconPath": "https://bj.bcebos.com/txy-dev/txy/main/bizhi.png",
            "selectedIconPath": "https://bj.bcebos.com/txy-dev/txy/main/bizhi.png"
          },
          {
            "pagePath": "pages/bizhi/index",
            "text": "证件照",
            "iconPath": "https://bj.bcebos.com/txy-dev/txy/main/zhenjian.png",
            "selectedIconPath": "https://bj.bcebos.com/txy-dev/txy/main/zhengjian.png"
          },
          {
            "pagePath": "pages/bizhi/index",
            "text": "头像易",
            "iconPath": "https://bj.bcebos.com/txy-dev/txy/main/txy.png",
            "selectedIconPath": "https://bj.bcebos.com/txy-dev/txy/main/txy.png"
          }
        ]
      }
    },
    methods: {
      switchTab(item, index) {
        console.log("item", item)
        console.log("index", index)
        let url = item.pagePath;
        // 对应患者和医生的首页
        if (index == 0) {
            url = "/pages/index/index"
        }
        // 对应患者和医生的我的页面
        if (index == 1) {
            url = "/pages/bizhi/index"
        }
        if (index == 2) {
          uni.navigateToMiniProgram({
            appId: 'wxac06eaffe466baa3',
          })
          // wxacd92e691aba23dd
          // wxac06eaffe466baa3
          return
        }
        if (index == 3) {
          uni.navigateToMiniProgram({
            appId: 'wxacd92e691aba23dd',
          })
          // wxacd92e691aba23dd
          // wxac06eaffe466baa3
          return
        }
        uni.switchTab({
            url
        })
      }
    }
  }
</script>
 
<style lang="less">
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
    .tab-bar-item {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .tab_img {
          width: 37rpx;
          height: 41rpx;
      }

      .tab_text {
          font-size: 20rpx;
          margin-top: 9rpx;
      }
    }
  }
</style>

在需要用到tabBar 的页面 引用。 并且需要关闭第一种方法中默认的

onShow() {
  uni.hideTabBar({
    animation: false
  })
},

下面时我的自定义tabBar 效果，欢迎扫描体验