基于vue的无缝滚动组件
生活随笔
收集整理的這篇文章主要介紹了
基于vue的无缝滚动组件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue-seamless-scroll
A simple, Seamless scrolling for Vue.js
在awesome上一直沒有發現vue的無縫滾動組件，在工作之余寫了個組件，分享出來希望大家一起學習進步。Demo
https://github.com/chenxuan0000/vue-seamless-scroll/index.html
Installation
NPM
npm install vue-seamless-scroll --saveUsage
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 <head>... </head> <body><div id="app"><vue-seamless-scroll></vue-seamless-scroll></div><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.lengthhoverStop: true, //是否啟用鼠標hover控制direction: 1, //1 往上 0 往下openWatch: true, //開啟data實時監聽singleHeight: 0, //單條數據高度有值hoverStop關閉waitTime: 1000 //單步停止等待時間}}TKS
vue-seamless-scroll發現bug或者有什么不足望指點,感覺不錯點個star吧。
原文地址：https://segmentfault.com/a/1190000012459158
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的基于vue的无缝滚动组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js sort方法根据数组中对象的某一个
- 下一篇： 基于 Vue.js 的移动端组件库min