微信小程序之自定义tabBar及切换不同版本显示不同tabBar

今天,我在写页面的时候,碰到需要切换不同身份(两个版本)时候底部tabBar显示不同,我的解决方法是:

首先在components(组件模板)下新建一个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="tab-img"></image>    
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="tab-img"></image>  
      <text>{{item.text}}</text>    
    </navigator>    
    </block>     
  </view>    
</template>   

然后在app.js中

 //底部导航版本1  
  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
    });
  },
  //底部导航版本2
  editTabBar1: function() {
    var curPageArr = getCurrentPages();
    var curPage = curPageArr[curPageArr.length - 1];
    var pagePath = curPage.route;
    if (pagePath.indexOf('/') != 0) {
      pagePath = '/' + pagePath;
    }
    var tabBar = this.globalData.tabBar1;
    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
    });
  },

 globalData: {
    //版本1底部导航栏显示
    tabBar: {
      "color": "#9E9E9E",
      "list": [
        {   
          "pagePath": "/pages/student/student",
          "text": "服务",
          "iconPath": "../../images/fuwu.png",
          "selectedIconPath": "../../images/fuwu-active.png",
          "clas": "tab-item",
          "selectedColor": "#4EDF80",
          active: true
        },
        {
          "pagePath": "/pages/mine/mine",
          "text": "我的",
          "iconPath": "../../images/mine.png",
          "selectedIconPath": "../../images/mine-active.png",
          "selectedColor": "#4EDF80",
          "clas": "tab-item",
          active: false
        }
      ],
      "position": "bottom"
    },
    //版本2底部导航栏显示
    tabBar1: {
      "color": "#9E9E9E",
      "list": [   
        {
          "pagePath": "/pages/teacher/teacher",
          "text": "服务",
          "iconPath": "../../images/fuwu.png",
          "selectedIconPath": "../../images/Tfuwu-active.png",
          "clas": "tab-item",
          "selectedColor": "#2180ed",
          active: true
        },
        {
          "pagePath": "/pages/Tmine/Tmine",
          "text": "我的",
          "iconPath": "../../images/mine.png",
          "selectedIconPath": "../../images/Tmine-active.png",
          "selectedColor": "#2180ed",
          "clas": "tab-item",
          active: false
        }
      ],
      "position": "bottom"
    }
  },

接着app.wxss

.tab-item {
  padding: 0 20rpx;
  text-align: center;
  padding-top: 8px;
}

.tab-img {
  width: 23px;
  height: 23px;
  display: block;
  margin: auto;
}

.tab-bar {
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 100;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

写好了两个不同的底部导航的样式后,下一步就是在你需要页面中如何引用了。

我这里根据我的需求在四个页面中做了引用,例如:student.wxml

<!-- 引入底部导航栏 -->
<import src="../../components/tabBar.wxml" />
<template is="tabBar" data="{{tabBar}}" />

然后是在对应的js中加入两句话,这里对应的js页面是student.js,首先要记得在顶部写上var app = getApp();,然后在onload(),或者onshow()方法中添加上

   onLoad: function (options) {
    app.editTabBar();    //显示自定义的底部导航
  },

到这里就搞定了自定义tabBar的使用了。

效果图如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这里要注意,如果你要引用另一个版本的底部TabBar,只需注意js中的onload()或者onshow()在这里插入图片描述

好了,以上就是我的分享了,有更好的方法可以评论区告诉我。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章