1.0.2 • Published 10 months ago

simple-seamless-scrolling v1.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
10 months ago

一个简单的无缝滚动插件

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滚动速度,绝对值越大越快,可以为负数Number1
unlimited是否是无限滚动模式,朝一个方向无限滚动,不会再回到列表开头,需要动态向list中添加数据Booleanfalse
direction方向,horizontal: 水平, vertical: 垂直Stringhorizontal
touchMove是否跟随手指触摸移动Booleantrue

event

事件名说明回调参数
changePosition当列表滚动时触发{ position: 滚动位置 ,height: 容器高度,width: 容器宽度,innerHeight: 列表高度,innerWidth: 列表宽度}