更新记录
1.0.0(2024-07-23) 下载此版本
发布
平台兼容性
uni-app
Vue2 | Vue3 |
---|---|
√ | ? |
app-vue | app-nvue | app-android | app-ios |
---|---|---|---|
? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
小程序自定义组件的通用使用方式详见: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中配置。
参数名 | 说明 | 类型 | 例子 | 默认值 | 可选值 |
---|---|---|---|---|---|
bg | 导航栏背景色 | string | rgb(0,0,0,0.2) | rgb(255,255,255,0.5) | tabBar背景色,建议使用示例形式,可以方便配置透明度 |
blur | 导航栏背景模糊度,bg有透明效果时生效 | number | 5 | 15 | 自然数 |
ballBg | 激活的Tab,滚动球背景色 | string | rgb(0,0,0,0.2) | rgb(255,255,255,0.2) | 同bg |
ballBlur | 激活的Tab,滚动球模糊度,ballBg有透明效果时生效 | number | 5 | 5 | 自然数 |
selectedColor | 激活的Tab的文字颜色 | string | green | #3cc51f | rgb、颜色名或16进制数 |
fontSize | Tab文字大小 | number | 30 | 28 | 正整数 |
color | 未激活的Tab文字颜色 | string | red | gray | rgb、颜色名或16进制数 |
type | 导航栏的样式 | string | primary | primary | ripple(波纹)、primary |
list | tabBar的页面列表 | Array | [tabBarItem] | - | - |
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: "我的"
}
]
小结
暂时先更新这些,持续更新中,若有问题欢迎打扰