属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
fixed | 是否固定定位到底部 | _ boolean _ | false |
zIndex | z-index的值 | number | 100 |
activeColor | active的颜色 | string | rgb(19, 187, 134) |
color | 未选中的颜色 | string | #999 |
options | tabbar的传入数据 | array | [] |
jumpType | 路由跳转方式 | string | replace |
iconSize | icon大小 | number | 29 |
iconMarginBottom | icon的margin-bottom的值 | number | 0 |
height | 高度 | number | 54 |
名称 | 描述 | 类型 | 是否必传 |
---|---|---|---|
path | 跳转的路由地址 | string | 否 |
imgSrc | 未选中的img图片地址 | string | 是 |
activeImgSrc | 选中的img图片地址 | string | 是 |
label | 文案 | string | 否 |
badgeVisible | 是否展示badge | boolean | 否 |
count | badge的value | number | 否 |
color | badge的color | string | 否 |
backgroundColor | badge的backgroundColor | string | 否 |
max | badge的max | number | 否 |
名称 | 描述 | 参数 |
---|---|---|
change | change事件 | index |
<template>
<div>
<div class="items">
<p class="item_title">基础用法</p>
<vill-tab-bar
:options="options"
@change="handlechange"
/>
</div>
<div class="items">
<p class="item_title">自定义</p>
<vill-tab-bar
:options="options2"
activeColor="red"
color="#cccccc"
:iconSize="38"
:height="68"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: [],
options2: []
}
},
created() {
this.options =[{
imgSrc: this.$withBase('/assets/imgs/footer/44.png'),
activeImgSrc: this.$withBase('/assets/imgs/footer/11.png'),
path: '',
label: '首页',
badgeVisible: false,
count: 0
},{
imgSrc: this.$withBase('/assets/imgs/footer/55.png'),
activeImgSrc: this.$withBase('/assets/imgs/footer/22.png'),
path: '',
label: '推荐',
badgeVisible: true,
count: 0
},{
imgSrc: this.$withBase('/assets/imgs/footer/44.png'),
activeImgSrc: this.$withBase('/assets/imgs/footer/11.png'),
path: '',
label: '接消息',
badgeVisible: true,
count: 100,
max: 99
},{
imgSrc: this.$withBase('/assets/imgs/footer/66.png'),
activeImgSrc: this.$withBase('/assets/imgs/footer/33.png'),
path: '',
label: '我的',
badgeVisible: true,
count: 9
}],
this.options2 = [{
imgSrc: this.$withBase('/assets/imgs/footer/44.png'),
activeImgSrc: this.$withBase('/assets/imgs/footer/11.png'),
path: '',
label: '首页',
badgeVisible: false,
count: 0
},{
imgSrc: this.$withBase('/assets/imgs/footer/55.png'),
activeImgSrc: this.$withBase('/assets/imgs/footer/22.png'),
path: '',
label: '推荐',
badgeVisible: true,
count: 1,
color: 'red',
backgroundColor: 'orange'
},{
imgSrc: this.$withBase('/assets/imgs/footer/44.png'),
activeImgSrc: this.$withBase('/assets/imgs/footer/11.png'),
path: '',
label: '接消息',
badgeVisible: true,
count: 100
},{
imgSrc: this.$withBase('/assets/imgs/footer/66.png'),
activeImgSrc: this.$withBase('/assets/imgs/footer/33.png'),
path: '',
label: '我的',
badgeVisible: true,
count: 9
}]
},
methods: {
handlechange(index) {
console.log(`下标为:${index}`)
}
}
}
</script>
<style lang="scss" scoped>
.swiper_item_1{
height: 300px;
display: flex;
background: orange;
color: #ffffff;
justify-content: center;
align-items: center;
font-size: 60px;
font-weight: 600;
width: 100%;
}
.swiper_item_2{
height: 300px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
>img{
width: 100%;
height: auto;
}
}
</style>