微信小程序自定义菜单tabbar

「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」。

在小程序开发中，产品设计了不同的角色需要展示不同的菜单，在这种情况下，无法使用小程序原生的 tabbar ，就需要自定义一个和 tabbar 功能相同的组件来实现效果了查阅了官方文档后总结了自定义菜单的实现方式，一起看看吧！

一：app.js

小程序自定义菜单tabbar提供了几种方式进行菜单配置，其中默认的一种是在app.json中配置，如下：

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
}
复制代码

这种配置方式适用于只有一种角色的小程序，比较简单和单一，满足不了日常需求。

二：自定义组件

在我们开发小程序过程中，单一的菜单并不能满足我们的需求，我们经常会有多个角色登录，菜单需要展示不一样的情况，这时就需要用到自定义菜单的功能了，将自定义菜单封装成一个组件，全局引入。我们一起看看吧！

新建一个template的文件夹如下：

举个栗子：
有3种角色，学生，教师，自由用户
template.wxml

// 自定义菜单的组件的html
<template name="tabbar">
    <van-tabbar active="{{activeIndex}}" bind:change="onChange" active-color="#FB8337" inactive-color="#DBDBDB">
        <van-tabbar-item wx:for="{{list}}" wx:key="index">
            <image slot="icon" src="{{item.icon.normal}}" mode="aspectFit" style="width: 30px; height: 20px;" />
            <image slot="icon-active" src="{{item.icon.active}}" mode="aspectFit" style="width: 30px; height: 20px;" />
            {{item.name}}
        </van-tabbar-item>
    </van-tabbar>
</template>
复制代码

template.js

// 自定义tabbar列表
var userTabbar = {
    "activeIndex": 0,
    "list": [{
        pagePath: "/student/index/index",
        name: "锻炼",
        selected: true,
        icon: {
            normal: "/image/duanlian.png",
            active: "/image/duanlian-active.png",
        }
    }, {
        pagePath: "/student/index3/index3",
        name: "我的",
        selected: false,
        icon: {
            normal: "/image/wode.png",
            active: "/image/wode-active.png",
        }
    }]
}
var studentTabbar = {
    "activeIndex": 1,
    "list": [{
        pagePath: "/student/index2/index2",
        name: "体测",
        selected: false,
        icon: {
            normal: "/image/tice.png",
            active: "/image/tice-active.png",
        }
    }, {
        pagePath: "/student/index/index",
        name: "锻炼",
        selected: true,
        icon: {
            normal: "/image/duanlian.png",
            active: "/image/duanlian-active.png",
        }
    },{
        pagePath: "/student/index3/index3",
        name: "我的",
        selected: false,
        icon: {
            normal: "/image/wode.png",
            active: "/image/wode-active.png",
        }
    }]
}
var teacherTabbar = {
    "activeIndex": 0,
    "list": [{
        name: "首页",
        selected: true,
        icon: {
            normal: "/image/index.png",
            active: "/image/index-active.png",
        }
    }, {
        name: "体测",
        selected: false,
        icon: {
            normal: "/image/tice.png",
            active: "/image/tice-active.png",
        }
    }, {
        name: "锻炼",
        selected: false,
        icon: {
            normal: "/image/duanlian.png",
            active: "/image/duanlian-active.png",
        }
    }, {
        name: "我的",
        selected: false,
        icon: {
            normal: "/image/wode.png",
            active: "/image/wode-active.png",
        }
    }],
}
module.exports = {
    userTabbar,
    studentTabbar,
    teacherTabbar,
}
复制代码

三：页面调用

在首页引入，就可以实现分角色菜单了。 index.wxml

<!-- 引入自定义tabbar -->
<import src="/template/template.wxml"></import>
复制代码

index.js

 // 切换tabbar
    onChange(e) {
        if (e.detail == this.data.tabbar.activeIndex) return;
        this.setData({
            'tabbar.activeIndex': e.detail
        })
        getApp().globalData.pageIndex = '';
        this.changeTitle();
    },
    // 改变导航栏名称
    changeTitle() {
        if (getApp().globalData.pageIndex == 'mine') {
            if (this.data.userType == 2) { // 学生
                this.setData({
                    'tabbar.activeIndex': 2 // 我的
                })
            } else if (this.data.userType == 1) { // 教师
                this.setData({
                    'tabbar.activeIndex': 3 // 我的
                })
            }
        }
        let title, index = this.data.tabbar.activeIndex,
            userType = this.data.userType;
        if (userType == 3) { // 自由用户
            title = index === 0 ? '锻炼' : '我的';
        } else if (userType == 2) { // 学生
            title = index === 0 ? '体测' : index === 1 ? '锻炼' : index === 2 ? '场馆' : '我的';
        } else if (userType == 1) { // 教师
            title = index === 0 ? '首页' : index === 1 ? '体测' : index === 2 ? '锻炼' : '我的';
        }
        wx.setNavigationBarTitle({
            title
        })
    },
复制代码

教师菜单如下：

扫描二维码关注公众号，回复： 13685792 查看本文章