tabbar具体如何使用或者具体属性,请参考:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
接下来就直接放代码:
tabbar.wxml
<view class="page">
<mp-tabbar class="topbar" style="position:fixed;top:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="tabChange" current="{{index}}">
</mp-tabbar>
<view class="page-bd">
<block wx:if="{{index==0}}">
<view>这是第一个页面</view>
</block>
<block wx:else>
<view>这是第二个页面</view>
</block>
</view>
</view>
tabar.json(这里的路径根据你自己的来,我的weui是跟pages同级的,所以直接用的绝对路径)
{
"usingComponents": {
"mp-tabbar": "/weui/tabbar/tabbar"
}
}
tabbar.js
Page({
data: {
index:0,
list: [{
"text": "班级",
"iconPath": "/images/class.png",
"selectedIconPath": "/images/class-select.png",
},
{
"text": "中心",
"iconPath": "/images/center.png",
"selectedIconPath": "/images/center-select.png",
}]
},
tabChange(e) {
// console.log('tab change', e)
this.setData({
index: e.detail.index
})
}
});
这样就可以实现tabbar点击实现页面切换;
页面效果:
因为我不会传动图,所以只能放个图片,但是实际上它是可以实现的;我这个tabbar是放到顶部的,如果要放到底部,
可以在页面中mp-tabbar标签中有个style,里面有top:0;改为bottom:0;就可以了。