magicianShiro / vue-tab-carousel

vue scroll tab carousel

tab-carousel

安装

npm i --save vue-tab-carousel

初始化

import Vue from 'vue'
import TabCarousel from 'vue-tab-carousel'

Vue.use(TabCarousel)

使用

tab组件

<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组件

注意: 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

loadmore组件

注意: 不管是下拉刷新还是上滑加载, 当数据拿到之后需要调用该组件的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才有效)	-

tabCarousel组件

注意: 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	-