suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Schritte zum Erzielen eines nahtlosen Scrolleffekts mit vue.js

Detaillierte Erläuterung der Schritte zum Erzielen eines nahtlosen Scrolleffekts mit vue.js

php中世界最好的语言
php中世界最好的语言Original
2018-04-13 10:48:473192Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte geben, um mit vue.js einen nahtlosen Scrolleffekt zu erzielen Werfen wir einen Blick darauf. Dieser Artikel stellt ein einfaches Beispiel für nahtloses Scrollen basierend auf vue.js vor. Wenn Sie interessiert sind, schauen Sie sich das an.

:feet:Online-Dokumentdemo :ear_of_rice:Kleine Demo :blue_book:Englisches

Dokument

Installieren

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: 'scroll-seamless'})
<template>
 <scroll-seamless></scroll-seamless>
</template>
Allgemeine Verwendung (Einführung in Skript-Tags)

Beispiel:

Detaillierte Demoseite test/test.html

Standardwert des Konfigurationselements 
<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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! 
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)
    }
   }

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung des React-Server-Renderings


So verbinden Sie node.js mit MySQL


Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Erzielen eines nahtlosen Scrolleffekts mit vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php mysql node.js vue.js html es6 npm JS
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：So verbinden Sie node.js mit MySQLNächster Artikel：So verbinden Sie node.js mit MySQL

In Verbindung stehende Artikel

Mehr sehen