微信小程序如何自定义tabbar菜单

2021-06-22 10:49 微信小程序 66 梁俊威

有的时候,我们需要对微信小程序官方设定的tabbar进行样式修改,这个时候有很多小伙伴就懵了,因为在官方上没有对这一个有特别多的说明,废话不多说,直接上码!(不得不吐槽,官方给的样式真不怎么样!)

找到根目录的app.json文件

"tabBar":{
    "custom": true, // 这里的true是关键
    "color": "#666666",
    "selectedColor": "#3d90f7",
    "backgroundColor": "#ffffff",
    "list": [
        // 一定要填写,这里填写你的菜单项,具体可以参考小程序官方文档
    ]
}

然后在根目录新建一个文件夹命名为“custom-tab-bar”。

在改文件夹下新建 index.wxml、index.wxss、index.js、index.json

四个文件中分别如下:

index.wxss 这里撰写你的样式

index.js

Component({
    data: {
        iphoneX:1, // 因为考虑iPhoneX系列的用户体验,所以在做底部菜单时应该适当调整
        selected: 0,
        color: "#000",
        selectedColor: "#0080ff",
        list: [
        {
            "pagePath": "/pages/index/index", // 这里的路劲最前面一定要加 /
            "text": "首页",
            "iconPath": "../images/index.png",
            "selectedIconPath": "../images/index_active.png"
        },
        {
            "pagePath": "/pages/notice/index",
            "text": "消息",
            "iconPath": "../images/sweet.png",
            "selectedIconPath": "../images/sweet_active.png"
        }
        ]
    },
    methods: {
        switchTab(e) {
            const url = e.currentTarget.dataset.path;
            const index = e.currentTarget.dataset.index;
            wx.switchTab({ url });
            this.setData({
                selected: index
            })
        },
    }
})

index.wxml

<view class="tabbar {{iphoneX ? 'tabbarX' : ''}}">
    <view wx:for="{{list}}" wx:key="index" class="menu_item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
        <view class="tabbar_wrap {{selected === index ? 'tabbar-active' : ''}}">
            <view class="pic">
            <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
            </view>
            <view class="text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
        </view>
    </view>
    <view class="clearfix"></view>
</view>

接下来就由你自己在wxss文件中发挥了,还有一个比较重要的是,我们需要在这些tabbar页面的js中添加以下代码才算圆满结束

// 自定义菜单声明菜单选中, 若app.json文件中的tarbar->custom为true,则需要填写此处
onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        this.getTabBar().setData({
            selected: 0,// 这里填写在index.js中的list的顺序,从0开始,不要问我为什么!
            iphoneX: app.globalData.iphoneX
        });
    }
},

如果你有任何不明白的地方,欢迎前来咨询。

若无特殊说明,本站点所有内容均为原创,转载请说明出处!

原文链接:https://www.ljwei.com.cn/read/302.html

QQ客服

QQ客服

微信客服

微信客服

微信客服二维码
意见反馈

意见反馈

一键置顶