根据用户身份,动态设置底部的导航图标
实现步骤:
第一步,先配置: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 =2
let 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.dataset
const url = data.path
wx.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 的下标累加。文章来源:https://www.toymoban.com/news/detail-557976.html
onShow: function () {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
console.log('2222222')
this.getTabBar().setData({
selected: 0
})
}
},
以上就完成了根据用户身份动态设置底部的导航图标的效果,如果还有疑问可以在评论区留言,对你有帮助的话点个赞吧~文章来源地址https://www.toymoban.com/news/detail-557976.html
到了这里,关于小程序自定义底部导航 custom-tab-bar完整实现代码附效果图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!