更新记录

1.0.4（2024-07-20） 下载此版本

修改bug

1.0.3（2024-07-20） 下载此版本

修复一些问题

1.0.2（2024-07-19） 下载此版本

修复问题

平台兼容性

jack-beatabbar简介

jack-beatabbar是一款适用于uniapp的底部导航栏插件，其样式高度可定制，样式新颖灵动，打破了uniapp默认tabbar栏不可自定义的壁垒，此版本仅适用于h5，微信小程序版请移步至这里。

开发文档

1.首先在main.js中引入

import JackBeatabbar from "@/uni_modules/jack-beatabbar"

Vue.use(JackBeatabbar)

2.在pages.json中正常配置tabbar信息,仅list数组生效,backgroundColor等样式不生效

//示例：
{
    "pages": [ //pages数组中第一项表示应用启动页
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path" : "pages/my/my",
            "style" : 
            {
                "navigationBarTitleText" : "我的"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "backgroundColor": "#007aff",//在组件中不生效
        "list": [
            {
                "iconPath": "/static/logo.png",//注意使用图片绝对路径,否则可能出现获取不到的情况
                "pagePath": "pages/index/index",
                "text": "首页"
            },
            {
                "iconPath": "/static/logo.png",
                "pagePath": "pages/my/my",
                "text": "我的"
            }
        ]
    }
}

3.修改App.vue文件。在pages.json中添加tabbar信息后会创建默认tabbar，此时，需要改变App.vue内容来覆盖默认的tabbar。至此,你已经完成了组件的引入。

<!--加入template模板代码,创建了路由出口-->
<template>
    <view>
        <router-view></router-view>
        <!--在此位置添加本组件-->
        <JackBeatabbar></JackBeatabbar>
    </view>
</template>

<!--另外还需要在App.vue中引入样式文件-->
<style>
    @import url('@/uni_modules/jack-beatabbar/index.css');
</style>

参数说明

小结

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