2022-05 最新自定义小程序底部 Tabbar 标签栏 - Vant Weapp 组件库实现

1,347 阅读3分钟

概述

虽然小程序有原生 tabBar 配置实现,但是如果用户需求中出现一些例如 根据实际业务而增加、减少项,故使用自定义 Tabbar 功能更加符合实际业务需求,在本篇总结 Vant 组件库提供了视图层和逻辑层的代码实现

分析

功能实现分成两部分进行,首先是将自定义 Tabbar 写成组件,第二部分是页面引入组件后的调整;

  • 第一部分
    • 在根目录下新建文件夹 命名为 custom-tab-bar
    • custom-tab-bar 文件夹下右键新建 component 取名为index
  • 第二部分
    • 在需要使用自定义 Tabbar 的页面 json 文件中引入写好的 custom-tab-bar 组件
    • 引入后则来到 wxml 中示例化组件
    • 最后在 js 文件的声明周期函数 onshow 中调用 this.getTabBar().init() 确保组件跳转页面与图标的切换保持一致

注意

  • 需要将自定义组件的文件夹放到与 pages 文件夹 同级位置
  • 具体操作可看 Vant 组件库 文档 ,引入组件,传递参数,复用性更强
  • 开始了自定义的 tabbar 后,需要动态计算可展示区域的高度

代码Part 1 - 组件实现

{
    "component": true,
    "usingComponents": {
      "van-tabbar": "@vant/weapp/tabbar/index",
      "van-tabbar-item": "@vant/weapp/tabbar-item/index"
    }
}
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#6BBB6F">
    <!-- info 为显示徽标数量 -->
  <van-tabbar-item info="" wx:for="{{list}}" wx:key="index">
    <image slot="icon" src="{{item.icon }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="{{ item.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    <text>{{item.text}}</text>
  </van-tabbar-item>
</van-tabbar>
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        active: 0,   //切换控制器
        list: [{
            url: "/pages/index/index",
            icon: "../image/tarBar/icon01.png",
            active: "../image/tarBar/icon01_on.png",
            text: "首页",
        }, {
            url: "/pages/demo1/demo1",
            icon: '../image/tarBar/icon02.png',
            active: "../image/tarBar/icon02_on.png",
            text: "分类",
        }, {
            url: "/pages/demo2/demo2",
            icon: "../image/tarBar/icon03.png",
            active: "../image/tarBar/icon03_on.png",
            text: "购物车",
        }, {
            url: "/pages/mine/mine",
            icon: "../image/tarBar/icon04.png",
            active: "../image/tarBar/icon04_on.png",
            text: "我的",
        }]
    },

    /**
     * 组件的方法列表
     */
    methods: {
        onChange: function (e) {
            var that = this;
            let list = that.data.list;
            that.setData({
                active: e.detail,
            });
            // console.log(that.data.active);
            wx.switchTab({
                url: list[e.detail].url,
            })
        },
        init() {
            const page = getCurrentPages().pop();
            console.log(page);
            this.setData({
                active: this.data.list.findIndex(item => item.url === `/${page.route}`)
            });
        }
    }
})


/**
 *  总结:
 *      1.使用 onChange 函数 已经能简单 实现点击跳转页面的功能,但是图标的选中状态出现混乱,
 *          1.1 为解决此问题,需要通过在引用组件页面的 js 中的 onshow 生命周期中调用 this.getTarBar().init()方法
 *          1.2 思考:为什么需要在引用组件页面的js 中的 onshow 生命周期中引用 init方法 ?
 *          1.3 分析 :
 *                  数组的 pop() 方法 : 移除数组的最后一个元素,并返回该元素
 *                  findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置
 *                  1.3.1 了解下 init()方法内的执行语句:
 *                        声明变量存放 获取到的当前页面路径
 *                        page.route 跳转到当前页面 === item.url   如果符合条件则返回index
 *                        将此下标 setData 给 active
 *
 *
 *
 *       2. 虽然在 app.json 文件中已经开启自定义 tabBar 声明 ,  但也还是需要在 tabBar-list 中将目标页面设置到 pagePath 中
 *	        否则使用 api - wx.switchTab 报错且无法跳转
 */

代码Part 2 - 组件使用

在这里选取 首页页面 使用自定义 Tabbar 代码

{
  "usingComponents": {
    "custom-tab-bar":"/custom-tab-bar/index"
  },
  "navigationBarTitleText": "首页"
}
<custom-tab-bar></custom-tab-bar>
Page({

   
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
	var that = this;
    that.getTabBar().init();
  },

})