微信小程序自定义tabbar 图标凸出效果

筱筱程序猿

已于 2022-07-13 10:32:03 修改

阅读量3.2k

点赞数

分类专栏：小程序、Lin-ui组件、vant Weapp 组件 javascript 文章标签：微信小程序 javascript 小程序

于 2022-07-01 10:27:57 首次发布

本文链接：https://blog.csdn.net/weixin_45252024/article/details/125544105

版权

本文介绍了微信小程序中如何自定义底部tabbar并实现图标凸出效果。通过新建custom-tab-bar文件夹及生成相关page，详细说明了自定义tabbar的创建过程和使用方法，包括在app.json和app.js中的配置。每个自定义tabbar页面需调用app.getCurrentTabbar()以避免初次点击下标不跟随的问题。

摘要由CSDN通过智能技术生成

小程序自定义底部 tabbar 凸起

底部导航栏这个功能是非常常见的一个功能，基本上一个完成的app，都会存在一个导航栏，那么微信小程序的导航栏该怎么实现呢

自定义tabbar

新建custom-tab-bar文件夹生成page

index.js

// custom-tab-bar/index.js
Component({
   
    /**
     * 组件的初始数据
     */
    data: {
   
        selected: 0, // 当前选中的下标
        color: '#1e1e1e', // tabbar 未选中字体的颜色
        selectedColor: "", // tabbar 选中字体的颜色
        list: [ // tababr 循环数据集
            {
   
                "pagePath": "pages/TerminalInfo/Terminal",
                "iconPath": "/image/icon_API.png",
                "selectedIconPath": "/image/icon_API_HL.png",
                "text": "终端设备"
            },
            {
    // 扫码是我要凸出的tab
                "pagePath": "pages/ScanCodes/ScanCodes",
                "iconPath": "/image/icon_component.png",
                "selectedIconPath": "/image/icon_component_HL.png",
                "text": "终端扫码",
                "isSpecial": true
            },
            {
   
                "pagePath": "pages/UserCenter/UserCenter",
                "iconPath": "/image/132.jpg",
                "selectedIconPath": "/image/132.jpg",
                "text": "个人中心"
            }
        ]
    },
    attached() {
   
    },
    methods: {
   
        switchTab(e) {
   
            let data = e.currentTarget.dataset;
           /**
             * 跳转页面为例
             * let url = data.path;
             *  this.setData({
             *      selected: data.index
             *  })
             *  // 跳转到 tabbar 页，关闭其他所有非 tabbar 页
             *  wx.switchTab({ url });
             * 
             * 下面是不需要跳转页面为例
             */
            if (!data.click) {
   
                let url = data.path;
                this.setData