需求分析:
小程序登录进来有2种身份,每种身份看到的页面不一样,而且tabbar的数量也不一样,这个时候就需要用到微信小程序的自定义tabbar, 自定义tabbar和原生tabbar在用户体验上差不多,几乎看不出有什么区别,废话不多说直接上代码
创建一个文件夹 custom-tab-bar,uniApp和微信小程序一样 放在项目根目录 (文件名不可更改)(如图所示)
如果是uniapp项目,代码也是wxml,wxss的语法, custom-tab-bar并不会被uniapp编译
在custom-tab-bar文件夹创建index.wxml (小程序官方建议:使用cover-view把层级尽量提高)
<!--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>
在custom-tab-bar文件夹创建index.js
通过改变list来更新tabbar的样式,以及数量
Component({
data: {
selected: 0,
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [{
pagePath: "/index/index1",
iconPath: "/image/icon_component.png",
selectedIconPath: "/image/icon_component_HL.png",
text: "组件1"
}, {
pagePath: "/index/index2",
iconPath: "/image/icon_API.png",
selectedIconPath: "/image/icon_API_HL.png",
text: "组件2"
},
{
pagePath: "/index/index3",
iconPath: "/image/icon_API.png",
selectedIconPath: "/image/icon_API_HL.png",
text: "组件3"
}
]
},
show() {
// 可以在这里控制显示
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selected: data.index
})
}
}
})
在custom-tab-bar文件夹创建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;
}
在custom-tab-bar文件夹创建index.json
{
"component": true
}
配置app.json
重要提示:“app.json中tabbar的list属性往多的配置,我理解为初始化站位,例如 true的时候显示2个tab,false的时候显示3个tab,那么tabbar的list里面就要配置三个tab,然后在custom-tab-bar/index.js里面可以控制tab的显示数量”
{
"pages":[
"index/index",
"index/index2",
"index/index3"
],
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "index/index1",
"text": "组件1"
},
{
"pagePath": "index/index2",
"text": "组件2"
},
{
"pagePath": "index/index3",
"text": "组件3"
}
]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
页面配置
我这里有index1,index2,index3,三个页面,分别在页面的onShow事件里面新增如下代码,
selected 是当前页面 在 custom-tab-bar/index.js里面list配置的索引也就是index
例如:上面的 index1页面是0, index2页面是1,index3页面是2文章来源:https://www.toymoban.com/news/detail-544136.html
onShow(){
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
//selected 是当前页面 在 custom-tab-bar/index.js里面list配置的索引也就是index
this.getTabBar().setData({
selected: 2
})
}
}
欢迎大家留言讨论,如有问题私信我文章来源地址https://www.toymoban.com/news/detail-544136.html
到了这里,关于微信小程序动态控制tabbar的数量,uniApp动态控制tabbar的数量的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!