基於vue的無縫滾動組件

時間 2019-11-07

標籤基於 vue 無縫滾動組件简体版

原文原文鏈接

vue-seamless-scroll

A simple, Seamless scrolling for Vue.jshtml

在awesome上一直沒有發現vue的無縫滾動組件，在工做之餘寫了個組件，分享出來但願你們一塊兒學習進步。

Demo

https://github.com/chenxuan0000/vue-seamless-scroll/index.htmlvue

Installation

NPM

npm install vue-seamless-scroll --save

Usage

ES6

如下es6用法須要webpack環境編譯.webpack

具體參考 example-src/App.vue

import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'

new Vue({
  components: {
    vueSeamlessScroll
  }
})

普通模式 (script tag)

Example:git

具體參考 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吧。es6

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。