小程序自定义底部导航 custom

自定义底部导航 custom"/>

小程序自定义底部导航 custom

根据用户身份，动态设置底部的导航图标

 实现步骤：

第一步，先配置：app.json里面的 tabBar 的 custom 设置为 true，如图：这里需要注意的是，自定义 tabBar 中包含的页面，在这里的 list 页面路径也必须得有，其它字段可以不设置

相关代码：

{"pages": ["pages/msgList/msgList","pages/index/index","pages/login/login","pages/user/user"],"tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","text": ""},{"pagePath": "pages/msgList/msgList","text": ""},{"pagePath": "pages/user/user","text": ""}]},"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F6F6F6","navigationBarTitleText": "","navigationBarTextStyle": "black"},"style": "v2","darkmode": true,"sitemapLocation": "sitemap.json","useExtendedLib": {"weui": true}
}

第二步，创建组件：在项目跟目录创建文件夹：custom-tab-bar ，里面是自定义底部导航的组件文件：

 组件完整示例代码如下：

index.js

Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#3cc51f",list: []},attached() {getApp().getUserInfo().then(res => {let userIdentity = res.userIdentity;console.log('userIdentity', userIdentity)userIdentity =2let arr1 = [{pagePath: "/pages/index/index",iconPath: "/images/icons/home.png",selectedIconPath: "/images/icons/home2.png",text: "首页"}, {pagePath: "/pages/msgList/msgList",iconPath: "/images/icons/message.png",selectedIconPath: "/images/icons/message2.png",text: "消息"}, {pagePath: "/pages/user/user",iconPath: "/images/icons/mine.png",selectedIconPath: "/images/icons/mine2.png",text: "我的"}]let arr2 = [{pagePath: "/pages/index/index",iconPath: "/images/icons/home.png",selectedIconPath: "/images/icons/home2.png",text: "首页"}, {pagePath: "/pages/user/user",iconPath: "/images/icons/mine.png",selectedIconPath: "/images/icons/mine2.png",text: "我的"}]this.setData({list: userIdentity == 1 ? arr1 : arr2})})},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})this.setData({selected: data.index})}}
})

index.json

{"component": true
}

index.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar"><cover-view class="tab-bar-border"></cover-view><cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image><cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view></cover-view>
</cover-view>

index.wxss

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);
}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.tab-bar-item cover-image {width: 27px;height: 27px;
}.tab-bar-item cover-view {font-size: 10px;
}

第3步，使用组件，在第一个tab页面的onShow写0，根据 tabBar 的 List 的下标累加。

onShow: function () {if (typeof this.getTabBar === 'function' && this.getTabBar()) {console.log('2222222')this.getTabBar().setData({selected: 0})}},

以上就完成了根据用户身份动态设置底部的导航图标的效果，如果还有疑问可以在评论区留言，对你有帮助的话点个赞吧~