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:342642parcourir
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 :
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