>  기사  >  웹 프론트엔드  >  vue.js를 사용하여 원활한 스크롤 효과를 얻는 방법

vue.js를 사용하여 원활한 스크롤 효과를 얻는 방법

亚连
亚连원래의
2018-06-09 14:42:253345검색

이 글은 주로 vue.js 기반의 원활한 스크롤 효과를 소개하며 매우 자세하게 소개되어 있으니 참고할 만한 가치가 있습니다.

vue.js 기반의 간단한 원활한 스크롤

:feet:온라인 문서 데모 :ear_of_rice:소규모 데모 :blue_book:영어 문서

설치

NPM

npm install vue-seamless-scroll --save

사용

ES6

자세한 데모 페이지 예 -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>
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: &#39;scroll-seamless&#39;})
<template>
 <scroll-seamless></scroll-seamless>
</template>

공용 사용법(스크립트 태그 소개)

예:

자세한 데모 페이지 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: &#39;#app&#39;
  })
 </script>
</body>
</html>

구성 항목 기본값

defaultOption () {
    return {
     step: 1, //数值越大速度滚动越快
     limitMoveNum: 5, //开始无缝滚动的数据量 //this.dataList.length
     hoverStop: true, //是否开启鼠标悬停stop
     direction: 1, // 0向下 1向上 2向左 3向右
     openWatch: true, //开启数据实时监控刷新dom
     singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
     singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
     waitTime: 1000 //单步运动停止的时间(默认值1000ms)
    }
   }

위 내용은 제가 정리한 내용입니다 여러분, 바랍니다. 앞으로 모든 사람에게 도움이 될 것입니다.

관련 기사:

AngularJS 양방향 데이터 바인딩 원리(자세한 튜토리얼)

JavaScript에서 다각형 중심을 계산하는 방법

WeChat 애플릿에서 스위치 선택기를 사용하는 방법

자세히 해석 Angular 관련 오류 404 문제

WeChat 애플릿에서 슬라이더 구성 요소를 사용하는 방법

위 내용은 vue.js를 사용하여 원활한 스크롤 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.