vue的無縫滾動組件詳解
- 小云云原創
- 2017-12-18 16:18:342756瀏覽
本文和大家分享vue的無縫滾動組件詳解，在awesome上一直沒有發現vue的無縫滾動組件，在工作之餘寫了個組件，分享出來希望大家一起學習進步。
Installation
NPM
npm install vue-seamless-scroll --save
Usage
ES6
以下es6用法需要webpack環境編譯.
具體參考example-src/App.vue
import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
new Vue({
components: {
vueSeamlessScroll
}
})
普通模式(script tag)
Example:
#具體參考test/test.html
<html>
<head>
...
</head>
<body>
<p id="app">
<vue-seamless-scroll></vue-seamless-scroll>
</p>
<script src="vue.js"></script>
<script src="vue-seamless-scroll"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
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吧。
相關推薦：
jquery滾動元件(vticker.js)實作頁面動態資料的捲動效果_jquery
以上是vue的無縫滾動組件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn