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