Heim >Web-Frontend >View.js >So implementieren Sie eine Listen-Scroll-Schleife in vue.js

So implementieren Sie eine Listen-Scroll-Schleife in vue.js

王林
王林Original
2021-09-29 17:50:573895Durchsuche

So implementieren Sie eine Listen-Scroll-Schleife in vue.js: 1. Installieren Sie vue-seamless-scroll. 2. Fügen Sie vue-seamless-scroll in die Datei ein und konfigurieren Sie die Komponente.

So implementieren Sie eine Listen-Scroll-Schleife in vue.js

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.9, Thinkpad T480-Computer.

Zuerst müssen wir vue-seamless-scroll installieren

Klicken Sie auf den Link unten, um das Demodokument anzuzeigen.

Link zum Instanzdokument

cnpm install vue-seamless-scroll --save

Dann fügen Sie es in die Datei ein und konfigurieren die Komponentenkonfiguration

import vueSeamlessScroll from 'vue-seamless-scroll'

So implementieren Sie eine Listen-Scroll-Schleife in vue.js

Verwenden Sie es abschließend einfach wie folgt:


 
<script>
import vueSeamlessScroll from &amp;#39;vue-seamless-scroll&amp;#39;
export default {
 data() {},
 components: { //组件
 vueSeamlessScroll
 },
 computed: {
 
 classOption () {
 return {
 step: 0.2, // 数值越大速度滚动越快
 limitMoveNum: 2, // 开始无缝滚动的数据量 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)
 }
 }
 },
}
 
 
</script>
 
 

Empfohlenes Lernen: php-Schulung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Listen-Scroll-Schleife in vue.js. 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