html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...

https://blog.csdn.net/small_lack/article/details/80959278

在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。

比如一个小程序需要两个版本(用户版、商家版)，并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。

此处以两个页面(index，logs)显示两种tabbar样式为例，通过切换按钮进行切换。

首先有一个模板文件：tabbar.wxml

{ {item.text}}

在app.json中无需定义“tabBar”

在app.js中自定义如下

//app.js

App({

onLaunch: function () {

},

//第一种底部

editTabBar: function () {

//使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。

var curPageArr =

getCurrentPages();

//获取加载的页面

var curPage =

curPageArr[curPageArr.length - 1];

//获取当前页面的对象

var pagePath =

curPage.route;

//当前页面url

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

});

},

//第二种底部，原理同上

editTabBar1: function () {

var curPageArr =

getCurrentPages();

var