关于微信小程序动态改变底部导航栏问题

xiaoxiao2021-02-28  11

微信小程序目前是不支持动态修改tabbar的,如果想在不同的页面显示不同的底部导航,那只有自定义tabbar了,

首先创建tabbar.wxml的模板,代码如下:

<template name="tabBar"> <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}"> <block wx:for="{{tabBar.list}}" wx:key="pagePath"> <navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}"> <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image> <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image> <text>{{item.text}}</text> </navigator> </block> <view class="clear"></view> </view> </template> 在这个模板中,我们在list里面每个对象都增加了一个selectedColor和active属性,方便对每个tabBar当前页做样式

然后我们在app.js配置不同tabbar对象,代码如下:

//app.js App({   onLaunch: function () {     //调用API从本地缓存中获取数据     var logs = wx.getStorageSync('logs') || []     logs.unshift(Date.now())     wx.setStorageSync('logs', logs)   },   //第一种状态的底部   editTabBar: function () {     var _curPageArr = getCurrentPages();     var _curPage = _curPageArr[_curPageArr.length - 1];       var _pagePath = _curPage.__route__;     if (_pagePath.indexOf('/') != 0) {       _pagePath = '/' + _pagePath;     }     var tabBar = this.globalData.tabBar;     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     });   },   //第二种状态的底部   editTabBar2: function () {     var _curPageArr = getCurrentPages();     var _curPage = _curPageArr[_curPageArr.length - 1];     var _pagePath = _curPage.__route__;     if (_pagePath.indexOf('/') != 0) {       _pagePath = '/' + _pagePath;     }     var tabBar = this.globalData.tabBar2;     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     });   },   getUserInfo:function(cb){     var that = this     if(this.globalData.userInfo){       typeof cb == "function" && cb(this.globalData.userInfo)     }else{       //调用登录接口       wx.login({         success: function () {           wx.getUserInfo({             success: function (res) {               that.globalData.userInfo = res.userInfo               typeof cb == "function" && cb(that.globalData.userInfo)             }           })         }       })     }   },   globalData:{     userInfo:null,     tabBar: {       "color": "#9E9E9E",       "selectedColor": "#f00",       "backgroundColor": "#fff",       "borderStyle": "#ccc",       "list": [         {           "pagePath": "/pages/index/index",           "text": "首页",           "iconPath": "/img/home.png",           "selectedIconPath": "/img/home.png",           "clas":"menu-item",           "selectedColor": "#4EDF80",             active: true         },         {           "pagePath": "/pages/logs/logs",           "text": "日志",           "iconPath": "/img/note.png",           "selectedIconPath": "/img/note.png",           "selectedColor": "#4EDF80",           "clas": "menu-item",           active: false         },         {           "pagePath": "/pages/test/test",           "text": "指南",           "iconPath": "/img/safari.png",           "selectedColor": "#4EDF80",           "clas": "menu-item",           active: false         }       ],       "position": "bottom"     },     tabBar2: {       "color": "#9E9E9E",       "selectedColor": "#f00",       "backgroundColor": "#fff",       "borderStyle": "#ccc",       "list": [         {           "pagePath": "/pages/index/index",           "text": "首页",           "iconPath": "/img/home.png",           "selectedIconPath": "/img/home.png",           "clas": "menu-item2",           "selectedColor": "#4EDF80",             active: true         },         {           "pagePath": "/pages/logs/logs",           "text": "日志",           "iconPath": "/img/note.png",           "selectedIconPath": "/img/note.png",           "selectedColor": "#4EDF80",           "clas": "menu-item2",           active: false         },         {           "pagePath": "/pages/cont/index",           "text": "指南",           "iconPath": "/img/note.png",           "selectedIconPath": "/img/home.png",           "selectedColor": "#4EDF80",           "clas": "menu-item2",           active: false         },         {           "pagePath": "/pages/detail/index",           "text": "内容",           "iconPath": "/img/safari.png",           "selectedColor": "#4EDF80",           "clas": "menu-item2",           active: false         }       ],       "position": "bottom"     }   } })

然后我们在相应的page.js中加载相应的tabbar对象

例如,我们在首页的index.js中加载tabBar,代码如下:

//index.js var app = getApp(); Page({   data: {       },   onLoad: function () {     app.editTabBar();   } })

则首页的效果图

然后点击日志页面,如果在logs.js中加载tabBar2,代码如下:

//logs.js var app = getApp(); var util = require('../../utils/util.js') Page({ data: { logs: [] }, onLoad: function () { app.editTabBar2(); this.setData({ logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log)) }) }) } })

则日志页的效果图

我们可以看到页面跳转到日志页后底部导航栏改变了

导航栏的样式随意写的,也贴出来吧,方便大家测试,我是写在app.wxss中

.menu-item{ width: 32%; float: left; text-align: center; padding-top: 8px; } .menu-item2{ width: 24%; float: left; text-align: center; padding-top: 8px; } .img{ width: 23px; height: 23px; display: block; margin:auto; } .clear{ clear: both; } .tab-bar{ position: fixed; width: 100%; padding: 0px 2%; }

参考文章 

微信小程序编写tabBar模板,map组件markers属性动态初始化

转载请注明原文地址: https://www.6miu.com/read-250060.html

最新回复(0)