Vue의 원활한 스크롤 구성 요소에 대한 자세한 설명-JS 튜토리얼-php.cn

Vue의 원활한 스크롤 구성 요소에 대한 자세한 설명

小云云

풀어 주다： 2017-12-18 16:18:34

원래의

2680명이 탐색했습니다.

이 기사에서는 Vue의 원활한 스크롤 구성 요소에 대한 자세한 설명을 공유합니다. 저는 Vue의 원활한 스크롤 구성 요소를 본 적이 없습니다. 여가 시간에 구성 요소를 작성하여 모두가 함께 배우고 발전할 수 있기를 바라면서 공유했습니다.

Installation

NPM

npm install vue-seamless-scroll --save

로그인 후 복사

Usage

ES6

다음 es6 사용에는 webpack 환경 컴파일이 필요합니다.

자세한 내용은 example-src/App.vue

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

new Vue({
  components: {
    vueSeamlessScroll
  }
})

로그인 후 복사

Normal 모드(스크립트 태그)를 참조하세요.

예:

자세한 내용은 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 //单步停止等待时间
        }
      }

로그인 후 복사