suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erklärung der nahtlosen Bildlaufkomponente von Vue

Ausführliche Erklärung der nahtlosen Bildlaufkomponente von Vue

小云云
小云云Original
2017-12-18 16:18:342733Durchsuche
Dieser Artikel gibt Ihnen eine detaillierte Erklärung der nahtlosen Scroll-Komponente von Vue. Ich habe nach der Arbeit eine Komponente geschrieben und sie mit Ihnen geteilt, in der Hoffnung, dass alle gemeinsam lernen und Fortschritte machen können.

Installation

NPM

npm install vue-seamless-scroll --save

Verwendung

ES6

Die folgende ES6-Verwendung erfordert die Kompilierung der Webpack-Umgebung.

Zur spezifischen Referenz: example-src/App.vue
import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'

new Vue({
  components: {
    vueSeamlessScroll
  }
})

Normaler Modus (Skript-Tag)

Beispiel:

Zur spezifischen Information Referenz, 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>

Konfigurieren

      defaultOption () {
        return {
          step: 1, //步长 越大滚动速度越快
          limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length
          hoverStop: true, //是否启用鼠标hover控制
          direction: 1, //1 往上 0 往下
          openWatch: true, //开启data实时监听
          singleHeight: 0, //单条数据高度有值hoverStop关闭
          waitTime: 1000 //单步停止等待时间
        }
      }

TKS

vue-seamless-scroll Wenn Sie einen Fehler finden oder Mängel haben, geben Sie bitte an Wenn Sie das Gefühl haben, dass es gut ist, geben Sie ihm einen Stern.

Verwandte Empfehlungen:

Jquery-Scrolling-Komponente (vticker.js) implementiert den Scrolleffekt dynamischer Daten auf der Seite_jquery

basierend auf Bildlaufleiste Ein einfaches Beispiel für Positionsbeurteilung_Javascript-Fähigkeiten

CSS-Codebeispiel zur Implementierung einer versteckten Bildlaufleiste

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der nahtlosen Bildlaufkomponente von Vue. 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：Grundlagen von Array-Operationen in JavaScriptNächster Artikel：Grundlagen von Array-Operationen in JavaScript

In Verbindung stehende Artikel

Mehr sehen