Maison > Article > interface Web > Explication détaillée des étapes pour obtenir un effet de défilement transparent avec vue.js

Explication détaillée des étapes pour obtenir un effet de défilement transparent avec vue.js

php中世界最好的语言original: 2018-04-13 10:48:473175parcourir

Cette fois, je vais vous donner une explication détaillée des étapes pour obtenir un effet de défilement transparent avec vue.js. Quelles sont les précautions pour obtenir un effet de défilement transparent avec vue.js. cas pratiques.

Cet article présente un exemple simple de défilement transparent basé sur vue.js Si vous êtes intéressé, venez jeter un œil.

:feet:Démo du document en ligne :ear_of_rice:Petite démo :blue_book:Anglais Document

Installer

NPM

npm install vue-seamless-scroll --save

Utiliser

ES6

Page de démonstration détaillée exemple-src/App.vue

// **main.js**
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
<template>
 <vue-seamless-scroll></vue-seamless-scroll>
</template>
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
<template>
 <scroll-seamless></scroll-seamless>
</template>

Utilisation courante (introduction de la balise de script)

Exemple :

Page de démonstration détaillée 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>

Valeur par défaut de l'élément de configuration

defaultOption () {
    return {
     step: 1, //数值越大速度滚动越快
     limitMoveNum: 5, //开始无缝滚动的数据量 //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)
    }
   }

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le rendu du serveur React

Comment connecter node.js à MySQL

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!

php mysql node.js vue.js html es6 npm JS

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：Comment connecter node.js à MySQLArticle suivant：Comment connecter node.js à MySQL

Articles Liés

Voir plus