基於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 --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> <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.length
          hoverStop: 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM