微客导航 » 文章资讯 » 支付宝小程序tabbar底部导航

支付宝小程序tabbar底部导航

2023-09-06 04:38:04 333

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

1.app.js中代码如下

editTabBar:function(){
vare=this.globalData.tabbar,a=getCurrentPages(),t=a[a.length-1],s=t.route;
console.log(t)
console.log(s)
0!=s.indexOf("/")&&(s="/"+s);
for(varnine.items)e.items[n].selected=!1,e.items[n].pagePath==s&&(e.items[n].selected=!0);
t.setData({
tabbar:e
});
},
globalData:{
userInfo:null,
//配置tabbar
tabbar:{
textColor:"#333",
selectedColor:"#d0501f",
backgroundColor:"#ffffff",
borderStyle:"#d5d5d5",
items:[{
pagePath:"/pages/seller/gzt/gzt",
name:"工作台",
icon:"/pages/icon/index.png",
activeIcon:"/pages/icon/index_1.png",
selected:!0
},{
pagePath:"/pages/seller/shezhi/shezhi",
name:"设置",
icon:"/pages/images/sz@3x.png",
activeIcon:"/pages/images/xzsz.png",
selected:!1
}],
position:"bottom"
}
}

2.template.axml代码如下





{{item.name}}

3.template.acssl代码如下

.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;
}

4.在需要引入的页面(.axml)中

5.在需要引入的样式(acss)中

@import"../template.acss";

6.在需要引入的js中

varapp=getApp();//放在顶部
tabbar:{},//放在data中
app.editTabBar();//放在onLoad中

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

返回顶部
3162201930
czq8825@qq.com

支付宝小程序tabbar底部导航

热门推荐

随机推荐