更新记录
1.0.1(2023-03-18)
初始发布
1.0.0(2023-03-18)
初始发布
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
liu-pageTab-bar适用于uni-app项目的页面tabBar自定义组件
本组件目前兼容微信小程序、H5
本组件支持小程序tabBar自定义,脱离小程序限制(tabbar 2 - 5个,个性图标展示等)
如使用过程中有问题或有一些好的建议,欢迎qq联系:2364518038
<liu-pageTab-bar :tabNavList="tabNavList" :showIndex="showIndex" :activeColor="'#3A76EE'" :isNeedSetNavTitle="true" @change="changePageTab"></liu-pageTab-bar>
export default {
data() {
return {
// 注:如需使用个性化图表,需设置tabNavList中某一项的bigType属性,个性展示如图一
// tabNavList: [{
// id: 1,
// name: '首页',
// icon: '/static/tabBar/1.png',
// activeIcon: '/static/tabBar/11.png'
// }, {
// id: 2,
// name: '某莫某某',
// icon: '/static/tabBar/4.png',
// activeIcon: '/static/tabBar/44.png',
// bigType: true
// }, {
// id: 3,
// name: '我的',
// icon: '/static/tabBar/3.png',
// activeIcon: '/static/tabBar/33.png'
// }],
tabNavList: [{
id: 1,
name: '首页',
icon: '/static/tabBar/1.png',
activeIcon: '/static/tabBar/11.png'
}, {
id: 2,
name: '朋友圈',
icon: '/static/tabBar/2.png',
activeIcon: '/static/tabBar/22.png'
}, {
id: 3,
name: '我的',
icon: '/static/tabBar/3.png',
activeIcon: '/static/tabBar/33.png'
}],
showIndex: 1
};
},
methods: {
//切换tabbar
changePageTab(index){
this.showIndex = index
}
}
}
属性说明
名称 |
类型 |
默认值 |
描述 |
tabNavList |
Array |
[] |
tab bar选项数据 |
showIndex |
Number |
1 |
初始选中项index |
color |
String |
'#999' |
默认文字颜色 |
activeColor |
String |
'#3A76EE' |
选中文字颜色 |
isNeedSetNavTitle |
Boolean |
false |
是否需要设置navigationBarTitleText |