小程序自带提供一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。但是这个写入是固定无法动态更换的，今天我们就讲讲如何自定义多tab应用。以下是完整的一套代码。
1、首先，我们在app.js定义一组tab是数据，代码如下：
tabBar: {
"color": "#999",
"list": [
{
"pagePath": "/pages/product/index",
"text": "题库",
"iconPath": "/img/aanor.png",
"selectedIconPath": "/img/aapre.png",
"selectedColor": "#007aff",
"active": false,
"pid":"2"
},
{
"pagePath": "/pages/product/ytList",
"text": "押纲点题",
"iconPath": "/img/bbnor.png",
"selectedIconPath": "/img/bbpre.png",
"selectedColor": "#007aff",
"active": false,
"pid":"4"
},
{
"pagePath": "/pages/product/qtList",
"text": "考点圈题",
"iconPath": "/img/ccnor.png",
"selectedIconPath": "/img/ccpre.png",
"selectedColor": "#007aff",
"active": false,
"pid":"9"
},
{
"pagePath": "/pages/product/txVod",
"text": "课程",
"iconPath": "/img/ddnor.png",
"selectedIconPath": "/img/ddpre.png",
"selectedColor": "#007aff",
"active": false,
"pid":"10"
},
{
"pagePath": "/pages/my/index",
"text": "我的",
"iconPath": "/img/eenor.png",
"selectedIconPath": "/img/eepre.png",
"selectedColor": "#007aff",
"active": false,
"pid":"0"
}
]
},
2、写好样式wxss，代码如下：
.menu-item5 text{
font-size: 11px;
text-align: center;
display: block;
bottom: 0px;
position: absolute;
width: 20%;
}
.menu-item5 image{
width: 24px;
}
.menu-item4{
float: left;
width: 25%;
text-align: center;
}
.menu-item4 text{
font-size: 11px;
text-align: center;
display: block;
bottom: 0px;
position: absolute;
width: 25%;
}
.menu-item4 image{
width: 24px;
}
.menu-item3{
float: left;
width: 33%;
text-align: center;
}
.menu-item3 text{
font-size: 11px;
text-align: center;
display: block;
bottom: 0px;
position: absolute;
width: 33%;
}
.menu-item3 image{
width: 24px;
}
.menu-item2{
float: left;
width: 50%;
text-align: center;
}
.menu-item2 text{
font-size: 11px;
text-align: center;
display: block;
bottom: 0px;
position: absolute;
width: 50%;
}
.menu-item2 image{
width: 24px;
}
.tab-bar{
position: fixed;
bottom: 0;
border-top:solid 1px #ccc;
background-color:#fff;
width:100%;
color:#999;
padding:5px 0px;
height: 45px;
}
3、视图wxml代码如下：
<view class="flex-h flex-hsb tab-bar">
<block wx:for="{{tabBar}}" wx:key="pagePath">
<view bindtap='toMenu' data-id="{{item.text}}" data-url="{{item.pagePath}}"
class="menu-item{{menus}}"
style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">
<image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" mode="widthFix"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active}}" mode="widthFix"></image>
<text>{{item.text}}</text>
</view>
</block>
</view>
4、控制器js代码如下：
menuList(tabBar,pid){
var menu_list = ['2','4','9','10']
var menus = menu_list.length
var tabBar1 = []
for (var i = 0; i < tabBar.list.length; i++) {
var tt = tabBar.list[i]
if (tt.pid == pid) {
tt.active = true
} else {
tt.active = false
}
if(in_array(tt.pid,menu_list)){
tabBar1.push(tt)
}
}
var ret = {};
ret['tabBar1'] = tabBar1;
ret['menus'] = menus;
return ret;
},
onLoad: function (options) {
var tabBar = app.globalData.tabBar
var ret = this.menuList(tabBar,'2')
this.setData({'tabBar':ret['tabBar1'],'menus':ret['menus']})
},
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！