Detailed explanation of the steps to achieve seamless scrolling effect with vue.js-JS Tutorial-php.cn

Detailed explanation of the steps to achieve seamless scrolling effect with vue.js

php中世界最好的语言

Release： 2018-04-13 10:48:47

Original

3191 people have browsed it

This time I will bring you a detailed explanation of the steps to achieve seamless scrolling effect with vue.js. What are the precautions for vue.js to achieve seamless scrolling effect. The following is a practical case. Let’s take a look.

This article introduces a simple example of seamless scrolling based on vue.js. If you are interested, come and take a look.

:feet:Online document demo :ear_of_rice:Small demo :blue_book:English Document

Install

NPM

npm install vue-seamless-scroll --save

use

ES6

Detailed demo page example-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: 'scroll-seamless'})
<template>
 <scroll-seamless></scroll-seamless>
</template>

Copy after login

Common usage (script tag introduction)

Example:

Detailed demo page 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

Configuration item default value

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)
    }
   }

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!