Home >Web Front-end >JS Tutorial >How to achieve seamless scrolling effect using vue.js

How to achieve seamless scrolling effect using vue.js

亚连Original: 2018-06-09 14:42:253346browse

This article mainly introduces a seamless scrolling effect based on vue.js. The article introduces it to you in very detail and has reference value. Friends in need can refer to

A simple one based on vue. Seamless scrolling of js

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

Installation

NPM

##npm install vue-seamless-scroll --save

Use

ES6

Detailed demo page example-src/App.vue

// **main.js**
import Vue from &#39;vue&#39;
import scroll from &#39;vue-seamless-scroll&#39;
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>

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: &#39;#app&#39;
  })
 </script>
</body>
</html>

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

The above is what I compiled for everyone. I hope that in the future It will be helpful to everyone.

AngularJS two-way data binding principle (detailed tutorial)

How to calculate polygon centroid in JavaScript

How to use switch selector in WeChat applet

Detailed interpretation of Angular error 404 issues

How to use the slider component in WeChat applet

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

Statement：

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

Previous article：Connecting to MySQL in nodejs (detailed tutorial)Next article：Connecting to MySQL in nodejs (detailed tutorial)

See more

How to achieve seamless scrolling effect using vue.js

Related articles