tabBar 自定义，小程序自定义底部导航栏

创建一个自定义组件 my_tab，组件代码在后面，先看调用自定义组件的代码，比如我需要在index 页面调用，就在index.json中引用组件，index.json 代码（引用的路径为你创建的自定义组件路径）

{
  "navigationStyle": "custom",
  "usingComponents": {
    "my_tab": "../Component/my_tab"
  }
}

我的组件目录如下：

然后在index.wxml 中使用组件就可以

<my_tab></my_tab>

效果图：

下面是组件代码：

组件JS代码

// my-picker.js
Component({
  /**
   * 组件的属性列表
   */
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.setData({
        idx:wx.getStorageSync('myTab')||1
      })
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  data: {
    idx:wx.getStorageSync('myTab')||1
  },
  /**
   * 组件的方法列表
   */
  methods: {
    navPage: function (e) {
      let id = e.currentTarget.id;
      if(id==wx.getStorageSync('myTab'))return

      wx.setStorageSync('myTab', id)
      if(id==1){
        wx.reLaunch({
          url: '/pages/chatList/chatList',
        })
      }else if(id==2){
        wx.reLaunch({
          url: '/pages/mailList/mailList',
        })
      }else if(id==3){
        wx.reLaunch({
          url: '/pages/find/find',
        })
      }else if(id==4){
        wx.reLaunch({
          url: '/pages/user/user',
        })
      }
    },
  }
})

my_tab.json

{
  "component": true,
  "usingComponents": {}
}

my_tab.wxml

<!--pages/my_tab.wxml-->
<view class="my_tab">
	<view catchtap="navPage" style="color:{{idx==1?'#13D36A':''}}" id="1">聊天</view>
	<view catchtap="navPage" style="color:{{idx==2?'#13D36A':''}}" id="2">通讯录</view>
	<view catchtap="navPage" style="color:{{idx==3?'#13D36A':''}}" id="3">发现</view>
	<view catchtap="navPage" style="color:{{idx==4?'#13D36A':''}}" id="4">我</view>
</view>

my_tab.wxss

/* pages/my_tab.wxss */
.my_tab {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 110rpx;
  line-height: 110rpx;
  display: flex;
  flex-direction: row;
  background-color: #F7F7F7;
  border-top: 1px solid #d0d0d0;
}

.my_tab view {
  flex: 1;
  text-align: center;
}

本文地址：https://blog.csdn.net/qq_35713752/article/details/107190260