下载安装

1.npm

npm install vue-seamless-scroll –save

2.yarn

yarn add vue-seamless-scroll

使用

1、全局注册

import Vue from ‘vue’
import scroll from ‘vue-seamless-scroll’
Vue.use(scroll)
//或者
//Vue.use(scroll,{componentName: ‘scroll-seamless’})

2、局部注册

import vueSeamless from ‘vue-seamless-scroll’
export default {
components: {
vueSeamless
}
}

3、简单使用

4、配置项

keydescriptiondefaultval
step数值越大速度滚动越快1Number
limitMoveNum开启无缝滚动的数据量5Number
hoverStop是否启用鼠标hover控制trueBoolean
direction方向 0 往下 1 往上 2向左 3向右1Number
openTouch移动端开启touch滑动trueBoolean
singleHeight单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/10Number
singleWidth单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/30Number
waitTime单步停止等待时间(默认值1000ms)1000Number
switchOffset左右切换按钮距离左右边界的边距(px)30Number
autoPlay1.1.17版本前手动切换时候需要置为falsetrueBoolean
switchSingleStep手动单步切换step值(px)134Number
switchDelay单步切换的动画时间(ms)400Number
switchDisabledClass不可以点击状态的switch按钮父元素的类名disabledString
isSingleRemUnitsingleHeight and singleWidth是否开启rem度量falseBoolean
navigation左右方向的滚动是否显示控制器按钮,true的时候autoPlay自动变为falsefalseBoolean

5、回调事件

namedescriptioncalback params
ScrollEnd一次滚动完成的回调事件null

6、实例

7、整体代码(一定要给最容器高度,以及隐藏!)

先看实例:

    {{ item.title }}:{{ item.time }}
export default { props: {}, data() {return { listData: [{ title: "张三", time: "2021-08-09",},{ title: "李四", time: "2021-08-09",},{ title: "王五", time: "2021-08-09",},{ title: "赵六", time: "2021-08-09",},{ title: "前七", time: "2021-08-09",},{ title: "孙八", time: "2021-08-09",}, ],}; }, computed: {seamlessScrollOption() { return {step: 0.2, // 数值越大速度滚动越快limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms) };}, },};

8、解决滚动出现空白问题:

当滚动第二轮时,在第一轮和第二轮的衔接处出现了空白,稍后第二轮从空白处跳出显示。而不是从底部出来,解决办法:

方法一:检查一下css样式,可能是布局出了问题,

我的是因为在子div中加了display:flex

方法二:清空下浏览器缓存试试

方法三:在vue-seamless-scroll中再复制一次滚动列表

方法四:*清除边距

* {

padding: 0;

margin: 0;

}

在此感谢文章出处:

https://www.cnblogs.com/Plume-blogs/p/15562814.html

vue-seamless-scroll无缝滚动组件使用方法详解 – 路饭网