1.0.2 • Published 10 months ago
simple-seamless-scrolling v1.0.2
一个简单的无缝滚动插件
vue2和vue3应该都可以用
例子:
- template
<SimpleSeamlessScrolling :list="list" > <template #default="{ item }"> <div class="list-item" >{{ item }}</div> </template> </SimpleSeamlessScrolling>
- script
import SimpleSeamlessScrolling from "simple-seamlessScrolling";
export default {
data(){
return {
list: [ "吃葡萄就吐葡萄皮,不吃葡萄怎么能吐葡萄皮", "扁担长,板凳宽,后面的词我忘了", "黑发肥发灰会非法,灰化肥飞花会发黑" ]
}
}
}
- style
.list-item{
margin-left: 10px;
}
API
props
参数 说明 类型 默认值 list 用来渲染滚动的列表,必传,数组内数据格式不固定,一般是字符串数组,但如果没有插槽的话显示的内容可能会和你想象的不一样 Array - step 滚动速度,绝对值越大越快,可以为负数 Number 1 unlimited 是否是无限滚动模式,朝一个方向无限滚动,不会再回到列表开头,需要动态向list中添加数据 Boolean false direction 方向,horizontal: 水平, vertical: 垂直 String horizontal touchMove 是否跟随手指触摸移动 Boolean true event
事件名 说明 回调参数 changePosition 当列表滚动时触发 { position: 滚动位置 ,height: 容器高度,width: 容器宽度,innerHeight: 列表高度,innerWidth: 列表宽度}