基于vue-seamless-scroll怎么实现无缝滚动效果

这篇文章主要介绍了基于vue-seamless-scroll怎么实现无缝滚动效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇基于vue-seamless-scroll怎么实现无缝滚动效果文章都会有所收获，下面我们一起来看看吧。

1、安装vue-seamless-scroll

npm install vue-seamless-scroll --save　

2、引入组件

全局引入在main.js中添加

import scroll from 'vue-seamless-scroll'Vue.use(scroll)

组件局部引入

import vueSeamlessScroll from 'vue-seamless-scroll'components: {        vueSeamlessScroll},

3、配置参数

// 监听属性 类似于data概念computed: {        defaultOption () {                return {                    step: 0.2, // 数值越大速度滚动越快                    limitMoveNum: 2, // 开始无缝滚动的数据量 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)                }            }         },　

4、完整实例代码

关于"基于vue-seamless-scroll怎么实现无缝滚动效果"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"基于vue-seamless-scroll怎么实现无缝滚动效果"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。