Detailed explanation of Vue's seamless scrolling component-JS Tutorial-php.cn

Detailed explanation of Vue's seamless scrolling component

小云云

Release： 2017-12-18 16:18:34

Original

2663 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!