npm i --save vue-tab-carousel
import Vue from 'vue'
import TabCarousel from 'vue-tab-carousel'
Vue.use(TabCarousel)
<template>
<navi-tab :tab-list="list1" v-model="activeIndex1"></navi-tab>
</template>
<script>
export default {
data () {
return {
list1: ['标签1', '标签2', '标签3'],
activeIndex1: 0,
}
}
}
</script>
参数 | 说明 | 类型 | 可选值 | 是否必填 | 默认值 |
---|---|---|---|---|---|
tab-list | 标签名 | Array | true | ||
line-width | 下划线长度 | Number/String | false | 60 | |
line-color | 下划线颜色 | String | false | #f60 | |
active-color | 文字选中时的颜色 | String | false | #f60 | |
default-color | 文字未被选中时的颜色 | String | false | #000 |
注意: carousel组件的slot中的内容不能用一个父元素全部包起来, 这和实现方式有关
<template>
<navi-carousel v-model="activeIndex">
<img
v-for="(img, index) in imgArr"
:key="index"
:src="img">
</navi-carousel>
</template>
<script>
export default {
data () {
return {
activeIndex: 0,
imgArr: [
require('example/assets/images/1.jpg'),
require('example/assets/images/2.jpg'),
require('example/assets/images/3.jpg'),
require('example/assets/images/4.jpg'),
require('example/assets/images/5.jpg'),
require('example/assets/images/6.jpg'),
require('example/assets/images/7.jpg'),
require('example/assets/images/8.jpg')
]
}
}
}
</script>
参数 | 说明 | 类型 | 可选值 | 是否必填 | 默认值 |
---|---|---|---|---|---|
animation-time | 过渡时间 | Number | false | 300 |
注意: 不管是下拉刷新还是上滑加载, 当数据拿到之后需要调用该组件的
resetMin
方法来重新计算高度 例如this.$refs.loadMore.resetMin()
<template>
<navi-load-more
ref="loadMore"
:height="400"
refresh
@refresh="refresh"
@loadMore="loadMore">
// 填写你的代码
</navi-load-more>
</template>
参数 | 说明 | 类型 | 可选值 | 是否必填 | 默认值 |
---|---|---|---|---|---|
height | 滑动视口的高度, 注意:当使用100%时,其高度根据他的父元素来计算 | Number/String | 100%/100vh/100/100px | true | 400 |
refresh | 是否开启下拉刷新 | Boolean | true/false | false | false |
refresh-allow | 下拉刷新是否出现箭头显示 | Boolean | true/false | false | true |
refresh-spring | 关闭下拉刷新时是否开启回弹效果 | Boolean | true/false | false | true |
事件名称 | 说明 | 回调参数 |
---|---|---|
loadMore | 滑动到底部的时候触发 | - |
refresh | 下拉刷新的时候触发(refresh参数为true才有效) | - |
注意:
navi-tab-carousel-item
组件中可以嵌套load-more
组件, 此时load-more
组件不需要设置height
属性,content-height
属性会将其所有的高度统一化
<template>
<navi-tab-carousel
:content-height="400"
:skeleton="true"
v-model="activeIndex">
<navi-tab-carousel-item tag="标签1">
// 填写你的代码(配合loadmore组件口味更佳)
</navi-tab-carousel-item>
<navi-tab-carousel-item tag="标签2">
// 填写你的代码(配合loadmore组件口味更佳)
</navi-tab-carousel-item>
<navi-tab-carousel-item tag="标签3">
// 填写你的代码(配合loadmore组件口味更佳)
</navi-tab-carousel-item>
</navi-tab-carousel>
</template>
关于tab的属性可以直接参照tab部分
参数 | 说明 | 类型 | 可选值 | 是否必填 | 默认值 |
---|---|---|---|---|---|
content-height | 滑动视口的高度, 注意:当使用100%时,其高度根据他的父元素来计算, 且内容区域是其父元素高度减去tab栏高度后得出的值 | Number/String | 100%/100vh/100/100px | true | 400 |
skeleton | 是否开启骨架屏占位(主要是为了懒加载) | Boolean | true/false | true | true |
参数 | 说明 | 类型 | 可选值 | 是否必填 | 默认值 |
---|---|---|---|---|---|
tag | 最终会统一作为tab的名称 | string | true | - |