更新记录

1.0.0（2024-07-23） 下载此版本

发布

平台兼容性

uni-app

uni-app x

小程序自定义组件的通用使用方式详见：uni-app中使用小程序自定义组件教程

jack-beatabbar-wx简介

jack-beatabbar-wx是一款适用于uniapp的底部导航栏插件，其样式可定制，样式新颖灵动，打破了uniapp默认tabbar栏不可自定义的壁垒。此插件仅适用于uniapp开发微信小程序，如需h5版本请移步这里。开发使用的微信小程序的开发语言，因此理论上也可以直接用在微信小程序的原生开发中，组件的编写依靠微信官方文档。

开发文档

1.首先打开下载好的uni_modules/jack-beattabbar-wx/wxcomponents目录，将custom-tab-bar文件夹整体复制到项目根目录。

2.在pages.json中配置页面信息,注意使用图片绝对路径,否则可能出现获取不到的情况,加上"custom":true，以关闭默认tabBar。

//示例：
{
    "pages": [ //pages数组中第一项表示应用启动页
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path" : "pages/my/my",
            "style" : 
            {
                "navigationBarTitleText" : "我的"
            }
        }
    ],

    "tabBar": {
        "list": [
            {
                "iconPath": "/static/logo.png",//注意使用图片绝对路径,否则可能出现获取不到的情况
                "pagePath": "pages/index/index",
                "text": "首页"
            },
            {
                "iconPath": "/static/logo.png",
                "pagePath": "pages/my/my",
                "text": "我的"
            }
        ],
        "custom":true//关闭默认tabBar
    }
}

3.修改custom-tab-bar/index.js文件。配置list项为tabBar页面列表，每一项的 pagePath、iconPath、selectedIconPath、text为必填项，具体参考示例。页面应该已经显示了组件效果。

list: [{
                pagePath: "pages/index/index",
                iconPath: "/static/logo.png",
                selectedIconPath: "/static/logo-act.png",
                text: "首页"
            },
            {
                pagePath: "pages/my/my",
                iconPath: "/static/logo.png",
                selectedIconPath: "/static/logo-act.png",
                text: "我的"
            },
            {
                pagePath: "pages/oth/oth",
                iconPath: "/static/logo.png",
                selectedIconPath: "/static/logo-act.png",
                text: "其他"
            }
        ]

4.此时切换tabBar会出现切换异常的问题，需要在每个tabBar页面中添加如下代码即可。至此,你已经完成了组件的引入。

import {
        handleOper
} from "@/custom-tab-bar/utils/index.js"

onShow() {
        handleOper.call(this)
}

配置说明

全部在custom-tab-bar/index.js 的 data中配置。

tabBarItem说明：

// tabBar页面列表，每一项的  pagePath、iconPath、selectedIconPath、text为必填项,如示例
list: [{
                pagePath: "pages/index/index",
                iconPath: "/static/logo.png",
                selectedIconPath: "/static/logo-act.png",
                text: "首页"
            },
            {
                pagePath: "pages/my/my",
                iconPath: "/static/logo.png",
                selectedIconPath: "/static/logo-act.png",
                text: "我的"
            }
        ]

小结

暂时先更新这些,持续更新中,若有问题欢迎打扰