微客导航 » 文章资讯 » 微信小程序tabbar底部导航

微信小程序tabbar底部导航

2023-09-06 06:00:04 314

微信小程序重写tabbar底部导航，供大家参考，具体内容如下

1.app.js代码如下：

editTabBar:function(){
vare=this.globalData.tabbar,a=getCurrentPages(),t=a[a.length-1],s=t.__route__;
0!=s.indexOf("/")&&(s="/"+s);
for(varnine.list)e.list[n].selected=!1,e.list[n].pagePath==s&&(e.list[n].selected=!0);
t.setData({
tabbar:e
});
},
tabBar:{
color:"#123",
selectedColor:"#1ba9ba",
borderStyle:"#1ba9ba",
backgroundColor:"#fff",
list:[{
pagePath:"/we7/pages/index/index",
iconPath:"/we7/resource/icon/home.png",
selectedIconPath:"/we7/resource/icon/homeselect.png",
text:"首页"
},{
pagePath:"/we7/pages/user/index/index",
iconPath:"/we7/resource/icon/user.png",
selectedIconPath:"/we7/resource/icon/userselect.png",
text:"我的"
}]
},
globalData:{
userInfo:null,
tabbar:{
color:"#333",
selectedColor:"#d0501f",
backgroundColor:"#ffffff",
borderStyle:"#d5d5d5",
list:[{
pagePath:"/pages/seller/gzt",
text:"工作台",
iconPath:"/pages/images/gzt@3x.png",
selectedIconPath:"/pages/images/gztxz@3x.png",
selected:!0
},{
pagePath:"/pages/seller/cp/cplb",
text:"商品",
iconPath:"/pages/images/dbdc.png",
selectedIconPath:"/pages/images/dbdcxz.png",
selected:!1
},
position:"bottom"
}
},

template.wxml





{{item.text}}

3.template.wxss

.tabbar_box{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-direction:row;
flex-direction:row;
-ms-flex-pack:distribute;
justify-content:space-around;
position:fixed;
bottom:0;
left:0;
z-index:999;
width:100%;
height:100rpx;
border-top:0.5rpxsolid#d5d5d5;
}

.tabbar_nav{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
font-size:25rpx;
height:100%;
}

.tabbar_icon{
width:40rpx;
height:40rpx;
}

在需要用的页面(wxml)添加如下代码

在需要的样式（wxss）添加如下代码

@import"template.wxss";

在需要的js页面添加如下代码：

vardsq,app=getApp();添加在顶部
tabbar:{},在data中添加
app.editTabBar();在onLoad中添加

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序tabbar底部导航

热门推荐

随机推荐