vue的无缝滚动组件vue

vue的无缝滚动组件vue

Installation

NPM

npm install vue-seamless-scroll --save

Usage

ES6

以下es6用法需要webpack环境编译.

target="_blank" title="View on Github">

class="white no-underline underline-hover">vue-seamless-scroll

无缝滚动demo

demo1 向上无缝滚动,hover可停止

var option = {

      step: 0.5,

      limitMoveNum: 5

}

class="warp">

class="warp">

v-text="item.date">

demo2 limitMoveNum过大不滚动 开启了openWatch

3s后data增加到9条

var option = {

      limitMoveNum: 7

}

@copy-data="listData1 = listData1.concat(listData1)"

class="warp">

@copy-data="listData1 = listData1.concat(listData1)"

class="warp">

class="date" v-text="item.date">

demo3 limitMoveNum过大不滚动 关闭了openWatch

3s后data增加到9条

var option = {

      limitMoveNum: 7

      openWatch: false

}

@copy-data="listData2 = listData2.concat(listData2)"

class="warp">

@copy-data="listData2 = listData2.concat(listData2)"

class="warp">

class="date" v-text="item.date">

demo4 向下滚动,禁止了hover悬停

var option = {

      limitMoveNum: 5,

      direction: 0,

      hoverStop: false,

}

@copy-data="listData3 = listData3.concat(listData3)"

class="warp">

@copy-data="listData3 = listData3.concat(listData3)"

class="warp">

class="date" v-text="item.date">

demo5 向上无缝滚动,单条停止一段时间

var option = {

      step: 0.5,

      limitMoveNum: 5

      singleHeight: 30,

      waitTime: 1000

}

@copy-data="listData4 = listData4.concat(listData4)"

class="warp">

@copy-data="listData4 = listData4.concat(listData4)"

class="warp">

v-text="item.date">

import Vue from 'vue'

import vueSeamlessScroll from 'vue-seamless-scroll'

new Vue({

components: {

vueSeamlessScroll

}

})

普通模式 (script tag)

Example:

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

@copy-data="listData = listData.concat(listData)"

class="warp">

@copy-data="listData = listData.concat(listData)"

class="warp">

v-text="item.date">

...

Configure

defaultOption () {

return {

step: 1, //步长 越大滚动速度越快

limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length

hoverStop: true, //是否启用鼠标hover控制

direction: 1, //1 往上 0 往下

openWatch: true, //开启data实时监听

singleHeight: 0, //单条数据高度有值hoverStop关闭

waitTime: 1000 //单步停止等待时间

}

}

TKS

vue-seamless-scroll发现bug或者有什么不足望指点,感觉不错点个star吧。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。