最近vue2项目中有使用文图和文字的无缝滚动场景,从网上看到有些挺有用的,特摘抄分享一下。
1.安装依赖
npm install vue-seamless-scroll --save
2.注册
全局注册
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
局部
<vue-seamless-scroll></vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll' // vue2引入方式
import scroll from "vue-seamless-scroll/src" // vue3引入方式
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)
}
}
},
key | description | default | val |
---|---|---|---|
step | 数值越大速度滚动越快 | 1 | Number |
limitMoveNum | 开启无缝滚动的数据量 | 5 | Number |
hoverStop | 是否启用鼠标hover控制 | true | Boolean |
direction | 方向 0 往下 1 往上 2向左 3向右 | 1 | Number |
openTouch | 移动端开启touch滑动 | true | Boolean |
singleHeight | 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 | 0 | Number |
singleWidth | 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 | 0 | Number |
waitTime | 单步停止等待时间(默认值1000ms) | 1000 | Number |
switchOffset | 左右切换按钮距离左右边界的边距(px) | 30 | Number |
autoPlay | 1.1.17 版本前手动切换时候需要置为false | true | Boolean |
switchSingleStep | 手动单步切换step值(px) | 134 | Number |
switchDelay | 单步切换的动画时间(ms) | 400 | Number |
switchDisabledClass | 不可以点击状态的switch按钮父元素的类名 | disabled | String |
isSingleRemUnit | singleHeight and singleWidth是否开启rem度量 | false | Boolean |
navigation | 左右方向的滚动是否显示控制器按钮,true的时候autoPlay自动变为false | false | Boolean |
案例
案例代码
<template>
<div>
<vue-seamless-scroll
:data="listData"
:class-option="seamlessScrollOption"
style="
border: 1px solid white;
height: 200px;
overflow: hidden;
width: 200px;
color: white;
font-size: 18px;
text-align: center;
"
>
<ul>
<li
v-for="(item, index) in listData"
:key="index"
style="padding: 10px; margin: 5px"
>
<span class="title">{{ item.title }}:</span
><span class="date">{{ item.time }}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</template>
<script>
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.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)
};
},
},
};
</script>
参考文章:
https://blog.csdn.net/ZXH0122/article/details/126297595
http://www.45fan.com/article.php?aid=1CWIFhuX4O2CWzzv
注意
:
使用过程中出现上下两个样式不一样或者样式错乱可参考下面文章
vue2中使用vue-seamless-scroll时出现数据重复或者样式错乱问题
遇到第二个滚动,就是复制出来的内容点击事件无效,参考下面文章
关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效
下班~