https://github.com/magicianshiro/vue-tab-carousel

vue scroll tab carousel
https://github.com/magicianshiro/vue-tab-carousel

loadmore tab-carousel vue-carousel vue-tab

Last synced: 29 days ago
JSON representation

vue scroll tab carousel

• Host: GitHub
• URL: https://github.com/magicianshiro/vue-tab-carousel
• Owner: magicianShiro
• License: mit
• Created: 2018-11-16T10:36:48.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-05T14:25:47.000Z (over 5 years ago)
• Last Synced: 2024-12-13T21:05:48.252Z (30 days ago)
• Topics: loadmore, tab-carousel, vue-carousel, vue-tab
• Language: JavaScript
• Homepage: https://magicianshiro.github.io/vue-tab-carousel/
• Size: 23.9 MB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tab-carousel

## 安装

`npm i --save vue-tab-carousel`

## 初始化

```vue

import Vue from 'vue'

import TabCarousel from 'vue-tab-carousel'

Vue.use(TabCarousel)

```

## 使用

### tab组件

```vue

  

export default {

  data () {

    return {

      list1: ['标签1', '标签2', '标签3'],

      activeIndex1: 0,

    }

  }

}

```

### 属性

|参数|说明|类型|可选值|是否必填|默认值|

|--|--|--|--|--|--|

|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中的内容不能用一个父元素全部包起来, 这和实现方式有关

```vue

  

    

  

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')

      ]

    }

  }

}

```

### 属性

|参数|说明|类型|可选值|是否必填|默认值|

|--|--|--|--|--|--|

|animation-time|过渡时间|Number||false|300|

## loadmore组件

> 注意: 不管是下拉刷新还是上滑加载, 当数据拿到之后需要调用该组件的`resetMin`方法来重新计算高度 例如  `this.$refs.loadMore.resetMin()`

```vue

  

    // 填写你的代码

  

```

### 属性

|参数|说明|类型|可选值|是否必填|默认值|

|--|--|--|--|--|--|

|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`属性会将其所有的高度统一化

```vue

  

    

      // 填写你的代码(配合loadmore组件口味更佳)

    

    

      // 填写你的代码(配合loadmore组件口味更佳)

    

    

      // 填写你的代码(配合loadmore组件口味更佳)

    

  

```

### 属性

> 关于tab的属性可以直接参照tab部分

|参数|说明|类型|可选值|是否必填|默认值|

|--|--|--|--|--|--|

|content-height|滑动视口的高度, **注意：当使用100%时，其高度根据他的父元素来计算, 且内容区域是其父元素高度减去tab栏高度后得出的值**|Number/String|100%/100vh/100/100px|true|400|

|skeleton|是否开启骨架屏占位(主要是为了懒加载)|Boolean|true/false|true|true|

### 子组件属性

|参数|说明|类型|可选值|是否必填|默认值|

|--|--|--|--|--|--|

|tag|最终会统一作为tab的名称|string||true|-|