更新记录
1.0.0(2020-10-19) 下载此版本
用于测试,勿下载
平台兼容性
自定义tabbar、可带小红点数字标记
示例代码
<template>
<view class="container">
<view class="footer-box">
<luo-tabbar dotType="success" dotFontColor="#ffffff" :tabList="list" @changeTab="changeTab"></luo-tabbar>
</view>
</view>
</template>
<script>
import luoTabbar from "@/components/luo-tabbar/luo-tabbar.vue"
export default {
data() {
return {
list:[
{
img: require('../../components/luo-tabbar/img/1.png'),
checkedImg: require('../../components/luo-tabbar/img/5.png'),
title: '首页'
},
{
img: require('../../components/luo-tabbar/img/2.png'),
checkedImg: require('../../components/luo-tabbar/img/6.png'),
title: '分类'
},
{
img: require('../../components/luo-tabbar/img/3.png'),
checkedImg: require('../../components/luo-tabbar/img/7.png'),
// isDot: true, //开启指示点
// val: 10,
title: '购物车'
},
{
img: require('../../components/luo-tabbar/img/4.png'),
checkedImg: require('../../components/luo-tabbar/img/8.png'),
title: '我的'
}
]
}
},
components:{
luoTabbar
},
onLoad() {
},
methods: {
changeTab(index){
console.log(index)
}
}
}
</script>
注意事项
需要开启指示点数据需要如下代码数据
{
img: require('./img/3.png'),
checkedImg: require('./img/7.png'),
isDot: true,
val: 10, //指示点值
title: '购物车'
}
使用说明
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
tabList | Array | [--] | tabbar数据 |
bHeight | Number | 50 | 盒子高度,单位px |
dColor | String | #515151 | 未选中颜色 |
aColor | String | #6CD5F6 | 选中颜色 |
backColor | String | #FFFFFF | 背景色 |
isTBorder | Boolean | false | 是否显示上border |
borderStyle | String | '1rpx solid #515151' | 上边框样式 |
fontSize | String | 24rpx | 文字样式 |
isBold | Boolean | false | 文字是否加粗 |
dotType | String | default | 标记点颜色类型,可选值:default(灰色)、primary(蓝色)、success(绿色)、warning(黄色)、error(红色) |
dotFontColor | String | #515151 | 标记点文字颜色 |
事件
名称 | 描述 |
---|---|
changeTab | 点击事件返回索引 |