Home > Web Front-end > JS Tutorial > Detailed explanation of the steps to achieve seamless scrolling effect with vue.js

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

php中世界最好的语言
Release: 2018-04-13 10:48:47
Original
3199 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!

Recommended reading:

Detailed steps to implement react server rendering

How to connect node.js to MySQL

The above is the detailed content of Detailed explanation of the steps to achieve seamless scrolling effect with vue.js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
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