jer-s / vue-seamless-scroll Goto Github PK

View Code? Open in Web Editor NEW

:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

License: MIT License

JavaScript 14.89% Vue 75.17% HTML 9.94%

vue-seamless-scroll's Introduction

vue-seamless-scroll

A simple, Seamless scrolling for Vue.js

🐾online demo | 🌾 sample demo | 📘 中文文档

Browser support

IE	Firefox	Chrome	Safari	iOS	Android
IE9+	✓	✓	✓	✓	✓

Installation

NPM

npm install vue-seamless-scroll --save

Usage

ES6

Specific reference example-src/App.vue

// **main.js**
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

<template>
  <vue-seamless-scroll></vue-seamless-scroll>
</template>

//or you can set componentName default componentName is vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})

<template>
  <scroll-seamless></scroll-seamless>
</template>

normal use (script tag)

Example:

Specific reference 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, //the faster the rolling speed is faster
          limitMoveNum: 5, //start seamless scrolling minimum data  //this.dataList.length
          hoverStop: true, //mouse hover control is enabled
          direction: 1, // 0 down || 1 up || 2 left || 3 right
          openWatch: true, //open data realTime monitoring
          singleHeight: 0, //one single stop height(default zero is seamless) => direction 0/1
          singleWidth: 0, //one single stop width(default zero is seamless) => direction 2/3
          waitTime: 1000 //one single data stop wait time
        }
      }