支付宝小程序tabbar底部导航

支付宝小程序重写tabbar底部导航，供大家参考，具体内容如下1.app.js中代码如下editTabBar:funct

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

1.app.js中代码如下

editTabBar: function () {
 var e = 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 (var n in e.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代码如下

<template name="tabbar">
 <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position=='top'?'top:0':'bottom:0'}}">
 <navigator class="tabbar_nav" openType="redirect" style="width:{{1/tabbar.items.length*100}}%; color:{{item.selected?tabbar.selectedColor:tabbar.textColor}}" url="{{item.pagePath}}" a:for="{{tabbar.items}}" a:key="index">
 <image class="tabbar_icon" src="{{item.selected?item.activeIcon:item.icon}}"></image>
 <text>{{item.name}}</text>
 </navigator>
 </view>
</template>

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.5rpx solid #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)中

 - <import src="../template.axml"></import>
<template is="tabbar" data="{{tabbar:tabbar}}"></template>

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

@import "../template.acss";

6.在需要引入的js中

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

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