suchen

Heim >Web-Frontend >js-Tutorial >So erzielen Sie mit vue.js einen nahtlosen Scrolleffekt

So erzielen Sie mit vue.js einen nahtlosen Scrolleffekt

亚连
亚连Original
2018-06-09 14:42:253378Durchsuche

Dieser Artikel stellt hauptsächlich einen nahtlosen Scroll-Effekt basierend auf vue.js vor. Der Artikel stellt ihn sehr detailliert vor und hat Referenzwert.

Ein einfacher, basierend auf vue. Nahtloses Scrollen von js

:feet:online document demo :ear_of_rice:small demo :blue_book:English Document

Installation

NPM

npm install vue-seamless-scroll --save

Verwenden Sie

ES6

Detaillierte Demoseite 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: &#39;scroll-seamless&#39;})
<template>
 <scroll-seamless></scroll-seamless>
</template>

Allgemeine Verwendung (Einführung in Skript-Tags)

Beispiel:

Detaillierter Demoseitentest /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>

Standardwert des Konfigurationselements

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

AngularJS bidirektionales Datenbindungsprinzip (ausführliches Tutorial)

So berechnen Sie den Polygonschwerpunkt in JavaScript

So verwenden Sie die Schalterauswahl im WeChat-Applet

Detaillierte Interpretation der Angular-Fehler 404-Probleme

So verwenden Sie die Slider-Komponente im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit vue.js einen nahtlosen Scrolleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Herstellen einer Verbindung zu MySQL in NodeJS (ausführliches Tutorial)Nächster Artikel：Herstellen einer Verbindung zu MySQL in NodeJS (ausführliches Tutorial)

In Verbindung stehende Artikel

Mehr sehen