微信小程序 自定义tabBar

[组件]tabBar.wxml



[组件]tabBar.wxss
/* pages/components/tabBar/tabBar.wxss */
.tabbar_box{
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 120rpx;
/* border-top: 1rpx solid gray; */
animation: rightIn .1s;
-webkit-animation: rightIn .1s; /* Safari 与 Chrome */
}
.tabbar_nav{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 28rpx;
height: 100%;
}
.tabbar_icon{
width: 61rpx;
height: 61rpx;
}

@keyframes rightIn
{
from {left: 100%;}
to {left: 0;}
}
@-webkit-keyframes rightIn /* Safari 与 Chrome */
{
from {left: 100%;}
to {left: 0;}
}


@keyframes backgroundIn
{
from {background: transparent;}
to {background: white;}
}
@-webkit-keyframes backgroundIn /* Safari 与 Chrome */
{
from {background: transparent;}
to {background: white;}
}


[全局数据]app.js
globalData: {
userInfo: null,
tabBarStaff: {
color: "#999999",
selectedColor: "#0ABA07",
borderStyle: "white",
backgroundColor: "#f7f7fa",
list: [
{
pagePath: "/pages/allquotations/allquotations",
text: "项目",
iconPath: "/resources/images/search_gray.png",
selectedIconPath: "/resources/images/search_HL.png",
selected: false
},
{
pagePath: "/pages/newquotation/newquotation",
text: "新建",
iconPath: "/resources/images/add_gray.png",
selectedIconPath: "/resources/images/add_HL.png",
selected: false
},
{
pagePath: "/pages/myquotation/myquotation",
text: "我的",
iconPath: "/resources/images/user_gray.png",
selectedIconPath: "/resources/images/user_HL.png",
selected: true
}
],
position: "bottom"
},
tabBarLeader: {
color: "#999999",
selectedColor: "#0ABA07",
borderStyle: "white",
backgroundColor: "#f7f7fa",
list: [
{
pagePath: "/pages/allquotations/allquotations",
text: "审批",
iconPath: "/resources/images/search_gray.png",
selectedIconPath: "/resources/images/search_HL.png",
selected: false
},
{
pagePath: "/pages/newquotation/newquotation",
text: "员工",
iconPath: "/resources/images/add_gray.png",
selectedIconPath: "/resources/images/add_HL.png",
selected: false
},
{
pagePath: "/pages/myquotation/myquotation",
text: "报价",
iconPath: "/resources/images/user_gray.png",
selectedIconPath: "/resources/images/user_HL.png",
selected: false
},
{
pagePath: "/pages/myquotation/myquotation",
text: "我的",
iconPath: "/resources/images/user_gray.png",
selectedIconPath: "/resources/images/user_HL.png",
selected: false
}
],
position: "bottom"
},
tabBarAdmin: {
color: "#999999",
selectedColor: "#0ABA07",
borderStyle: "white",
backgroundColor: "#f7f7fa",
list: [
{
pagePath: "/pages/allquotations/allquotations",
text: "用户",
iconPath: "/resources/images/search_gray.png",
selectedIconPath: "/resources/images/search_HL.png",
selected: false
},
{
pagePath: "/pages/newquotation/newquotation",
text: "报价",
iconPath: "/resources/images/add_gray.png",
selectedIconPath: "/resources/images/add_HL.png",
selected: false
},
{
pagePath: "/pages/myquotation/myquotation",
text: "产品",
iconPath: "/resources/images/user_gray.png",
selectedIconPath: "/resources/images/user_HL.png",
selected: false
},
{
pagePath: "/pages/myquotation/myquotation",
text: "我的",
iconPath: "/resources/images/user_gray.png",
selectedIconPath: "/resources/images/user_HL.png",
selected: false
}
],
position: "bottom"
},
formIds:[],
},
/**
* 更新tabBar
*/
editTabBar: function () {
var tabBar = {};
wx.removeStorageSync("yqs_user_role")
var role = wx.getStorageSync("yqs_user_role") || wx.setStorageSync("yqs_user_role", "STAFF") && wx.getStorageSync("yqs_user_role");
// 根据角色选择不同的tabBar
if (role == "STAFF"){
tabBar = this.globalData.tabBarStaff;
} else if (role == "LEAD") {
tabBar = this.globalData.tabBarLeader;
} else if (role == "ADMIN") {
tabBar = this.globalData.tabBarAdmin;
}else{
tabBar = this.globalData.tabBarStaff;
}
console.log("role:", role, "tabBar:", tabBar);
var currentPages = getCurrentPages();
var _this = currentPages[currentPages.length - 1];
var pagePath = _this.__route__;

console.log("current path:", pagePath);

(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);//如果tabBar.list[index].pagePath不是以“/”开始 则加上

for (var i in tabBar.list) {
    tabBar.list[i].selected = false;
    (tabBar.list[i].pagePath == pagePath) && (tabBar.list[i].selected = true);
}
_this.setData({
    tabBar: tabBar
});
},

需要使用的一级页面：example.wxml