基于vue的无缝滚动组件
生活随笔
收集整理的這篇文章主要介紹了
基于vue的无缝滚动组件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
vue-seamless-scroll
A simple, Seamless scrolling for Vue.js
在awesome上一直沒有發(fā)現(xiàn)vue的無縫滾動(dòng)組件，在工作之余寫了個(gè)組件，分享出來希望大家一起學(xué)習(xí)進(jìn)步。Demo
https://github.com/chenxuan0000/vue-seamless-scroll/index.html
Installation
NPM
npm install vue-seamless-scroll --saveUsage
ES6
以下es6用法需要webpack環(huán)境編譯.
具體參考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, //步長 越大滾動(dòng)速度越快limitMoveNum: 5, //啟動(dòng)無縫滾動(dòng)最小數(shù)據(jù)量 this.dataList.lengthhoverStop: true, //是否啟用鼠標(biāo)hover控制direction: 1, //1 往上 0 往下openWatch: true, //開啟data實(shí)時(shí)監(jiān)聽singleHeight: 0, //單條數(shù)據(jù)高度有值hoverStop關(guān)閉waitTime: 1000 //單步停止等待時(shí)間}}TKS
vue-seamless-scroll發(fā)現(xiàn)bug或者有什么不足望指點(diǎn),感覺不錯(cuò)點(diǎn)個(gè)star吧。
原文地址：https://segmentfault.com/a/1190000012459158
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的基于vue的无缝滚动组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js sort方法根据数组中对象的某一个
- 下一篇： 基于 Vue.js 的移动端组件库min