微信小程式 自定義tabBar
阿新 • • 發佈:2019-02-13
[元件]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" }) } }