支付宝小程序tabbar底部导航
支付宝小程序重写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中
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。