微信小程序 自定义tabBar

[组件]tabBar.wxml
<!--pages/components/tabBar/tabBar.wxml-->
<template name="tabBar">
<view class="tabbar_box" style="background-color:{{tabBar.backgroundColor}}; border-top-color:{{tabBar.borderStyle}}; {{tabBar.position == 'top' ? 'top:0' : 'bottom:0'}}">
<block wx:for="{{tabBar.list}}" wx:for-item="item" wx:key="index">

<!--无事件-->
<!-- <navigator class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabBar.list.length*100}}%; color:{{item.selected ? tabBar.selectedColor : tabBar.color}}" open-type="redirect">
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{{item.text}}</text>
</navigator> -->

<!--有事件-->
<view class="tabbar_nav" data-url='{{item.pagePath}}' bindtap='__bindNavigate' style="width:{{1/tabBar.list.length*100}}%; color:{{item.selected ? tabBar.selectedColor : tabBar.color}}">
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{{item.text}}</text>
</view>
</block>
</view>
</template>

[组件]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
<import src="../components/tabBar/tabBar.wxml"/>
<template is="tabBar" data="{{tabBar}}"/>

example.js
,<!--有事件 需要-->
__bindNavigate: function (e) {
    util.switchTabBar(this.route,e);
},

util.js
// 自定义tabBar 跳转事件
function switchTabBar(currRoute,e){
  var currUrl = currRoute;
  var url = e.currentTarget.dataset.url;
  (currUrl.indexOf('/') != 0) && (currUrl = '/' + currUrl);
  console.log('url:', url);
  console.log('currUrl:', currUrl);
  if (currUrl != url) {
    wx.redirectTo({
      url: url,
    })
  } else {
    wx.showToast({
      title: '试试下拉页面刷新页面吧',
      image: "/resources/images/nomore.png"
    })
  }
}