微信小程序---自定义底部导航栏

最新推荐文章于 2024-04-19 11:27:49 发布

weixin_51747920

最新推荐文章于 2024-04-19 11:27:49 发布

阅读量798

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_51747920/article/details/130737130

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现：不同身份登录小程序显示不同的底部导航栏。

比如，一个微信小程序需要两个版本：用户版、商家版。

在全局配置app.json中配置tabBar信息

custom：设为 true，表示使用自定义组件
list：tab 页列表，在列表中的页面将被设置为 tab 页，自动加载 tabBar

app.json代码如下：

{
  "pages":[
    XXX
  ],
  "window":{
    XXX
  },
  "tabBar": {
    "custom": true,
    "color": "#7A7E83", //tab上的文字默认颜色
    "selectedColor": "#d81e06", //tab上的文字选中时的颜色
    "borderStyle": "black", //tabbar上边框的颜色，仅支持 black/white
    "backgroundColor": "#ffffff", //tab的背景色
    "list":[
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "/images/01.png",
        "selectedIconPath": "/images/01_select.png"
      },
      {
        "text": "校园",
        "pagePath": "pages/campus/campus",
        "iconPath": "/images/02.png",
        "selectedIconPath": "/images/02_select.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/person/person",
        "iconPath": "/images/03.png",
        "selectedIconPath": "/images/03_select.png"
      },
      {
        "text": "订单",
        "pagePath": "pages/order/order",
        "iconPath": "/images/04.png",
        "selectedIconPath": "/images/04_select.png"
      },
      {
        "text": "个人",
        "pagePath": "pages/person/trader",
        "iconPath": "/images/03.png",
        "selectedIconPath": "/images/03_select.png"
      }
    ]
  },
  "style": "v2",
}

添加tabBar代码文件

创建一个与 /pages 的同级目录，命名为 custom-tab-bar，然后在目录中创建组件 index 。

注意：

目录层级与目录命名问题，不可用其他名称命名。
是在文件的根目录下创建组件。

创建成功后，文件的目录如下图所示：

编写tabBar代码

index.js 代码如下：

// custom-tab-bar/index.js
Component({
    /**组件的属性列表*/
    properties: {
    },

    /**组件的初始数据*/
    data: {
      selected: 0, //属性默认值
      color: "#000000",
      roleId: 0, //roleId=0时，表示为“顾客”；roleId=1时，表示为“商家”。
      selectedColor: "#1396DB",
      allList: [{
          list1: [ //顾客底部导航栏
              {
                  "text": "首页",
                  "pagePath": "/pages/index/index",
                  "iconPath": "/images/01.png",
                  "selectedIconPath": "/images/01_select.png"
              },
              {
              "text": "校园",
              "pagePath": "/pages/campus/campus",
              "iconPath": "/images/02.png",
              "selectedIconPath": "/images/02_select.png"
              },
              {
              "text": "我的",
              "pagePath": "/pages/person/person",
              "iconPath": "/images/03.png",
              "selectedIconPath": "/images/03_select.png"
              }
          ],
          list2: [ //商家底部导航栏
              {
                  "text": "订单",
                  "pagePath": "/pages/order/order",
                  "iconPath": "/images/04.png",
                  "selectedIconPath": "/images/04_select.png"
              },
              {
              "text": "个人",
              "pagePath": "/pages/person/trader",
              "iconPath": "/images/03.png",
              "selectedIconPath": "/images/03_select.png"
              }
          ]
      }],
      list: []
    },

    attached() {
        const roleId = wx.getStorageSync('status') //获取缓存roleId
        if (roleId == 0) { //顾客
          this.setData({
            list: this.data.allList[0].list1,
          })
        }else if(roleId == 1) { //商家
          this.setData({
            list: this.data.allList[0].list2
          })
        }
        wx.setStorageSync('list', this.data.list) //存入缓存
    },

    /** 组件的方法列表*/
    methods: {
        switchTab(e) { //根据不同的路径切换tabbar下标
            // console.log('组件里面的数据',e)
            const data = e.currentTarget.dataset
            const path = data.path
            this.setData({
              selected: data.index
            })
            wx.switchTab({ 
              url: path,
            })
            // console.log('组件：', this.data.selected)
        }
    }
})

index.json 代码如下：

{
    "component": true,
    "usingComponents": {}
}

index.wxml 代码如下：

<!--custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image class="cover-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view class="cover-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

index.wxss 代码如下：

/* custom-tab-bar/index.wxss */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: white;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
}
.tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.tab-bar-item .cover-image {
    width: 50rpx;
    height: 50rpx;
}
.tab-bar-item .cover-view {
    margin-top: 6rpx;
    font-size: 24rpx;
}

注意，还有在具体的tabBar页面里添加如下代码：

/** 生命周期函数--监听页面显示*/
 onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        // 当前页面的 tabBar 索引
        selected: 0
      })
    }
  },