Comment obtenir un effet de défilement transparent à l'aide de vue.js-js tutoriel-php.cn

Comment obtenir un effet de défilement transparent à l'aide de vue.js

亚连

Libérer： 2018-06-09 14:42:25

original

3377 Les gens l'ont consulté

Cet article présente principalement un effet de défilement transparent basé sur vue.js. L'article vous le présente de manière très détaillée et a une valeur de référence. Les amis dans le besoin peuvent se référer à

Un simple basé sur vue. Défilement fluide de js

:feet:démo de document en ligne :ear_of_rice:petite démo :blue_book:Document anglais

Installation

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 &#39;vue&#39;
import scroll from &#39;vue-seamless-scroll&#39;
Vue.use(scroll)
<template>
 <vue-seamless-scroll></vue-seamless-scroll>
</template>
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: &#39;scroll-seamless&#39;})
<template>
 <scroll-seamless></scroll-seamless>
</template>

Copier après la connexion

Utilisation courante (introduction de la balise de script)

Exemple :

Démo détaillée page 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: &#39;#app&#39;
  })
 </script>
</body>
</html>

Copier après la connexion

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

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Principe de liaison de données bidirectionnelle AngularJS (tutoriel détaillé)

Comment calculer le centroïde d'un polygone en JavaScript

Comment utiliser le sélecteur de commutateur dans le mini programme WeChat

Interprétation détaillée des problèmes d'erreur angulaire 404

Comment utiliser le composant slider dans le mini programme WeChat

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!