最近接到一个需求用户在登录微信小程序时需要根据角色显示不同的tabbar内容,解决思路大致如下:
-
创建自定义TabBar的模板tabbar.wxml,本例放置在pages目录下创建的template文件夹中
-
-
<view class="tabbar" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1rpx '+tabBar.borderStyle + ';') : ''}}">
-
<block wx:for="{{tabBar.list}}" wx:key="pagePath">
-
<navigator url="{{item.pagePath}}" open-type="switchTab" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">
-
<image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="tabbar-icon"></image>
-
<image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="tabbar-icon"></image>
-
<text class='tabbar-text'>{{item.text}}</text>
-
-
-
-
-
-
onTabBar: function(key) {
-
var _curPageArr = getCurrentPages();
-
var _curPage = _curPageArr[_curPageArr.length - 1];
-
var _pagePath = _curPage.__route__;
-
if (_pagePath.indexOf('/') != 0) {
-
_pagePath = '/' + _pagePath;
-
-
var tabBar = this.tabBarData[key];
-
for (var i = 0; i < tabBar.list.length; i++) {
-
tabBar.list[i].active = false;
-
if (tabBar.list[i].pagePath == _pagePath) {
-
tabBar.list[i].active = true; // 根据页面地址设置当前页面状态
-
-
-
-
-
-
-
-
-
-
-
-
-
"selectedColor": "#1296db",
-
"backgroundColor": "white",
-
-
-
-
-
"pagePath": "/pages/message/message",
-
-
"iconPath": "/pages/images/icon/static/inform.png",
-
"selectedIconPath": "/pages/images/icon/active/inform.png",
-
-
-
-
-
"pagePath": "/pages/list/list",
-
-
"iconPath": "/pages/images/icon/static/list.png",
-
"selectedIconPath": "/pages/images/icon/active/list.png",
-
-
-
-
-
"pagePath": "/pages/user/user",
-
-
"iconPath": "/pages/images/icon/static/user.png",
-
"selectedIconPath": "/pages/images/icon/active/user.png",
-
-
-
-
-
-
-
-
"selectedColor": "#1296db",
-
"backgroundColor": "white",
-
-
-
-
-
"pagePath": "/pages/message/message",
-
-
"iconPath": "/pages/images/icon/static/inform.png",
-
"selectedIconPath": "/pages/images/icon/active/inform.png",
-
-
-
-
-
"pagePath": "/pages/user/user",
-
-
"iconPath": "/pages/images/icon/static/user.png",
-
"selectedIconPath": "/pages/images/icon/active/user.png",
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
至此基本的代码搬运工作已经基本完成,为了解决闪动问题,我并没有放弃使用微信自带的tabbar,所以在示例的app.json中需要配置所有的tabbar页面。
-
-
-
"selectedColor": "#1296db",
-
"backgroundColor": "white",
-
-
-
-
-
"pagePath": "pages/message/message",
-
-
"iconPath": "/pages/images/icon/static/inform.png",
-
"selectedIconPath": "/pages/images/icon/active/inform.png"
-
-
-
"pagePath": "pages/list/list",
-
-
"iconPath": "/pages/images/icon/static/list.png",
-
"selectedIconPath": "/pages/images/icon/active/list.png"
-
-
-
"pagePath": "pages/user/user",
-
-
"iconPath": "/pages/images/icon/static/user.png",
-
"selectedIconPath": "/pages/images/icon/active/user.png"
-
-
-
-
在具有tabbar的页面中我们可以在页面的onShow事件中添加如下代码
-
-
-
-
-
注意:这里的传入的参数user往往由登录时的角色判断获取,本例如果改为staff则呈现不同效果,app由const app = getApp()获取
-
<import src="../template/tabbar.wxml"/>
-
-
<template is="tabBar" data="{{tabBar:tabBar}}"></template>
点击我们的自定义TabBar时,实际还是调用的微信自带的tabbar的跳转,只是将它自带的tabbar隐藏而已,闪动问题自然就没有了!