vue scroll title
| 场景 | 说明 | 截图 |
|---|---|---|
| no animate（默认效果） | 默认不启动过渡，不可滑动， |  |
| animate（启动动画过渡效果） | 设置animate属性，启动过渡，不可滑动 |
 |
| slide（启动滑动效果） | 设置slidable属性，可以滑动，此设置会忽略animate属性,因为滑动必须启用过渡 |
 |
demo.vue
<template>
<div>
<scroll-title v-model="s"
animate
showCount="5"
speed="300">
<scroll-title-item v-for="(v, i) in arr" :key="i" >
{{v}}
</scroll-title-item>
</scroll-title>
</div>
</template>import {ScrollTitle, ScrollTitleItem } from "./index"
export default {
data(){
return {
arr: Array.from({length: 8}).map((t,k) => k),
s: 3
}
},
components: {
ScrollTitle,
ScrollTitleItem
}
}| 属性 | 用法说明 | 可选类型 | 可设置的值 | 默认值 | 依赖的属性 | 影响的属性 | 其他说明 |
|---|---|---|---|---|---|---|---|
wrapperCls |
最外层容器的自定义样式class | String |
样式class |
"" |
无 |
无 |
用来覆盖默认样式，允许用户自定义样式 |
showCount |
可是区域显示的个数 | Number, String |
数字或者可转换为数字的字符串 | 3 |
无 |
无 |
设置此属性可视区域显示个数，注意：当不可滑动的时候，如果总个数大于等于3个，此属性不能设置为2，因为这样就不能显示第三个了，同时此值不能大于总个数 |
speed |
切换速度 | Number, String |
数字或者可转换为数字的字符串 | 300 |
animate |
无 |
当设置了animate属性后，在切换时会按照这个速度移动 |
animate |
启动动画设置 | Boolean, String |
false,true,动画函数的名称 |
false |
无 |
无 |
设置此属性后切换的时候会出现过渡效果 |
value |
初始化显示位置 | Number |
数字 | 0 |
无 |
无 |
初始化以后设置第几个为active状态 |
slidable |
可滑动 | Boolean |
true,false |
false |
无 |
animate |
设置此属性后可以滑动，此属性设置以后忽略animate属性，此属性设置后默认启动动画 |