E企盈营销工具技术服务商 热线:4006-838-530

微信小程序中动态设置TabBar并解决闪动问题

E企盈直播平台营销卖货系统

最近接到一个需求用户在登录微信小程序时需要根据角色显示不同的tabbar内容,解决思路大致如下:创建自定义TabBar的模板tabbar.wxml,本例放置在pages目录下创建的template文件夹中template name=”tabBar”  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      /navigator    /block  /view/template在app.js中添加如下两项// 自定义显示tabbar  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; // 根据页面地址设置当前页面状态          }    }    _curPage.setData({      tabBar: tabBar    });  },  tabBarData: {    userInfo: null,    pop: 2,    num: 0,    user: {      “color”: “#dbdbdb”,      “selectedColor”: “#1296db”,      “backgroundColor”: “white”,      “borderStyle”: “white”,      “position”: “bottom”,      “list”: [        {          “pagePath”: “/pages/message/message”,          “text”: “消息”,          “iconPath”: “/pages/images/icon/static/inform.png”,          “selectedIconPath”: “/pages/images/icon/active/inform.png”,          “clas”: “tabbar-item”,          “active”: true        },        {          “pagePath”: “/pages/list/list”,          “text”: “列表”,          “iconPath”: “/pages/images/icon/static/list.png”,          “selectedIconPath”: “/pages/images/icon/active/list.png”,          “clas”: “tabbar-item”,          “active”: false        },        {          “pagePath”: “/pages/user/user”,          “text”: “我的”,          “iconPath”: “/pages/images/icon/static/user.png”,          “selectedIconPath”: “/pages/images/icon/active/user.png”,          “clas”: “tabbar-item”,          “active”: false        }      ]    },    staff: {      “color”: “#dbdbdb”,      “selectedColor”: “#1296db”,      “backgroundColor”: “white”,      “borderStyle”: “white”,      “position”: “bottom”,      “list”: [        {          “pagePath”: “/pages/message/message”,          “text”: “消息”,          “iconPath”: “/pages/images/icon/static/inform.png”,          “selectedIconPath”: “/pages/images/icon/active/inform.png”,          “clas”: “tabbar-item”,          “active”: true        },        {          “pagePath”: “/pages/user/user”,          “text”: “我的”,          “iconPath”: “/pages/images/icon/static/user.png”,          “selectedIconPath”: “/pages/images/icon/active/user.png”,          “clas”: “tabbar-item”,          “active”: false        }      ]    }  }在app.wxss中添加自定义TabBar的样式/*  自定义tabbar样式*/.tabbar {  display: flex;  flex-direction: row;  position: fixed;  width: 100%;}.tabbar-item {  flex-grow: 1;  padding: 6rpx 0;  text-align: center;}.tabbar-icon {  width: 46rpx;  height: 46rpx;  display: block;  margin: 0 auto;}.tabbar-text {  font-size: 24rpx;}至此基本的代码搬运工作已经基本完成,为了解决闪动问题,我并没有放弃使用微信自带的tabbar,所以在示例的app.json中需要配置所有的tabbar页面。”tabBar”: {    “color”: “#dbdbdb”,    “selectedColor”: “#1296db”,    “backgroundColor”: “white”,    “borderStyle”: “white”,    “position”: “bottom”,    “list”: [      {        “pagePath”: “pages/message/message”,        “text”: “消息”,        “iconPath”: “/pages/images/icon/static/inform.png”,        “selectedIconPath”: “/pages/images/icon/active/inform.png”      },      {        “pagePath”: “pages/list/list”,        “text”: “列表”,        “iconPath”: “/pages/images/icon/static/list.png”,        “selectedIconPath”: “/pages/images/icon/active/list.png”      },      {        “pagePath”: “pages/user/user”,        “text”: “我的”,        “iconPath”: “/pages/images/icon/static/user.png”,        “selectedIconPath”: “/pages/images/icon/active/user.png”      }    ]  },在具有tabbar的页面中我们可以在页面的onShow事件中添加如下代码wx.hideTabBar({    success: function() {       app.onTabBar(‘user’);    }})注意:这里的传入的参数user往往由登录时的角色判断获取,本例如果改为staff则呈现不同效果,app由const app = getApp()获取在相应的wxml页面添加import src=”../template/tabbar.wxml”/……页面内容template is=”tabBar” data=”{{tabBar:tabBar}}”/template点击我们的自定义TabBar时,实际还是调用的微信自带的tabbar的跳转,只是将它自带的tabbar隐藏而已,闪动问题自然就没有了!

E企盈系统专业开发:万商直播系统开发,直播系统,直播平台系统源码,小程序直播,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530
赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序中动态设置TabBar并解决闪动问题
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏