创建一个自定义组件 my_tab，组件代码在后面，先看调用自定义组件的代码，比如我需要在index 页面调用，就在index.json中引用组件，index.json 代码（引用的路径为你创建的自定义组件路径）
{"navigationStyle": "custom","usingComponents": {"my_tab": "../Component/my_tab"}}
我的组件目录如下：
然后在index.wxml 中使用组件就可以
<my_tab></my_tab>
效果图：
下面是组件代码：
组件JS代码
// my-picker.jsComponent({/*** 组件的属性列表*/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'))returnwx.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;}
