likes
comments
collection

微信小程序自定义菜单tabbar

作者站长头像
站长
· 阅读数 12

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

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

一:app.js

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

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

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

二:自定义组件

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

新建一个template的文件夹如下: 微信小程序自定义菜单tabbar

举个栗子: 有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
        })
    },

教师菜单如下: 微信小程序自定义菜单tabbar