Home > Web Front-end > JS Tutorial > body text

Detailed explanation of Vue's seamless scrolling component

小云云
Release: 2017-12-18 16:18:34
Original
2700 people have browsed it
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
Copy after login

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
  }
})
Copy after login

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>
Copy after login

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 //单步停止等待时间
        }
      }
Copy after login

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!

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template