search

Home >Web Front-end >JS Tutorial >Detailed explanation of Vue's seamless scrolling component

Detailed explanation of Vue's seamless scrolling component

小云云
小云云Original
2017-12-18 16:18:342779browse
This article shares with you a detailed explanation of Vue's seamless scrolling component. I have never found Vue's seamless scrolling component on awesome. I wrote a component after work and shared it with you in the hope that everyone can learn and progress together.

Installation

NPM

npm install vue-seamless-scroll --save

Usage

ES6

The following es6 usage requires webpack environment compilation.

For details, please refer to example-src/App.vue
import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'

new Vue({
  components: {
    vueSeamlessScroll
  }
})

Normal mode (script tag)

Example:

For details, please refer to test/test.html
<html>
<head>
  ...
</head>
<body>
  <p id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
  </p>
  <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 If you find a bug or have any shortcomings, please give me some advice. If you feel good, give it a star.

Related recommendations:

jquery scrolling component (vticker.js) implements the scrolling effect of dynamic data on the page_jquery

Based on the scroll bar A simple example of position judgment_javascript skills

css code example to implement hidden scroll bar

The above is the detailed content of Detailed explanation of Vue's seamless scrolling component. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Basics of array operations in JavaScriptNext article：Basics of array operations in JavaScript

Related articles

See more