Skip to content

magicianShiro/vue-tab-carousel

Repository files navigation

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 -