Maison > Article > interface Web > Explication détaillée du composant de défilement transparent de Vue

Explication détaillée du composant de défilement transparent de Vue

小云云original: 2017-12-18 16:18:342681parcourir

Cet article partage avec vous une explication détaillée du composant de défilement transparent de Vue. Je n'ai jamais trouvé le composant de défilement transparent de Vue génial. J'ai écrit un composant après le travail et je l'ai partagé avec vous dans l'espoir que tout le monde puisse apprendre et progresser ensemble.

Installation

NPM

npm install vue-seamless-scroll --save

Utilisation

ES6

L'utilisation d'es6 suivante nécessite la compilation de l'environnement webpack.

Pour référence spécifique, example-src/App.vue

import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'

new Vue({
  components: {
    vueSeamlessScroll
  }
})

Mode normal (balise de script)

Exemple :

Pour des référence, 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>

Configure

      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 Si vous trouvez un bug ou avez des lacunes, veuillez donner moi quelques conseils. Si vous trouvez que c'est bien, donnez-lui une étoile.

Recommandations associées :

le composant de défilement jquery (vticker.js) implémente l'effet de défilement des données dynamiques sur la page_jquery

basé sur barre de défilement Un exemple simple de compétences de jugement de position_javascript

Exemple de code CSS pour implémenter une barre de défilement cachée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Bases des opérations sur les tableaux en JavaScriptArticle suivant：Bases des opérations sur les tableaux en JavaScript

Articles Liés

Voir plus