使用vue.js如何实现无缝滚动效果-js教程-PHP中文网

首页

web前端

js教程

使用vue.js如何实现无缝滚动效果

亚连

Jun 09, 2018 pm 02:42 PM

vue.js 无缝滚动

这篇文章主要介绍了一个基于vue.js无缝滚动效果,文中给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下

一个简单的基于vue.js的无缝滚动

:feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document

安装

NPM

npm install vue-seamless-scroll --save

使用

ES6

详情的demo页面 example-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>

普通的使用方法 (script标签引入)

Example:

详情的demo页面 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>

配置项默认值

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

上面是我整理给大家的，希望今后会对大家有帮助。

AngularJS双向数据绑定原理（详细教程）

在JavaScript中如何计算多边形质心

在微信小程序中如何使用switch开关选择器

详细解读Angular有关报错404问题

在微信小程序中如何使用slider组件

以上是使用vue.js如何实现无缝滚动效果的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

8647

Java教程

1790

CakePHP 教程

1732

Laravel 教程

1582

PHP教程

1452

显示更多

Related knowledge

图文详解如何在Vue项目中集成Ace代码编辑器 Apr 24, 2023 am 10:52 AM

Ace 是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime、Vim 和 TextMate 等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 被维护为Cloud9 IDE的主要编辑器，并且是 Mozilla Skywriter (Bespin) 项目的继承者。

解析Vue2实现composition API的原理 Jan 13, 2023 am 08:30 AM

自从 Vue3 发布之后，composition API 这个词走入写 Vue 同学的视野之中，相信大家也一直听到 composition API 比之前的 options API 有多好多强，如今由于 @vue/composition-api 插件的发布，Vue2 的同学也可以上车咯，接下来我们主要以响应式的 ref 和 reactive 来深入分析一下，这个插件是怎么实现此