Explication détaillée du composant de défilement transparent de Vue-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-18 16:18:34

original

2707 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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 //单步停止等待时间
        }
      }

Copier après la connexion

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!