vue-seamless-scroll无缝滚动组件使用方法详解
作者:~疆 时间:2024-04-29 13:07:51
本文实例为大家分享了vue无缝滚动组件vue-seamless-scroll的具体实现代码,供大家参考,具体内容如下
下载
cnpm i -S vue-seamless-scroll
main.js中引入:
import VueSeamlessScroll from 'vue-seamless-scroll'
Vue.use(VueSeamlessScroll)
使用:
<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>
效果图2:
computed: {
seamlessScrollOption() {
return {
step: 0.5, // 数值越大速度滚动越快
hoverStop: true, // 是否开启鼠标悬停stop
direction: 0, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 40, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
};
},
},
来源:https://blog.csdn.net/qq_40323256/article/details/119533663
标签:vue,seamless,scroll,无缝滚动
0
投稿
猜你喜欢
python 双循环遍历list 变量判断代码
2021-02-10 12:38:12
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2023-04-16 08:42:49
python算法学习之桶排序算法实例(分块排序)
2022-09-08 13:11:33
Java基于正则表达式实现的替换匹配文本功能【经典实例】
2023-03-15 22:27:44
ServerXMLHTTP的setTimeouts超时设置
2010-01-02 20:38:00
[xhtml+css实例]不规则导航的制作
2008-04-04 18:11:00
怎么样用xmlhttp读取远程xml的数据
2008-10-11 13:52:00
Python中使用dom模块生成XML文件示例
2023-08-02 20:07:31
MySQL中查询的有关英文字母大小写问题的分析
2024-01-27 05:59:47
sql IDENTITY_INSERT对标识列的作用和使用
2024-01-20 16:05:04
python同步windows和linux文件
2023-12-11 11:44:35
详谈Pandas中iloc和loc以及ix的区别
2022-01-30 00:52:49
mysql批量更新多条记录的同一个字段为不同值的方法
2024-01-27 20:21:49
vue 自定义指令directive的使用场景
2024-05-13 09:09:08
在Python中将函数作为另一个函数的参数传入并调用的方法
2023-04-10 07:32:26
laravel学习教程之关联模型
2023-06-11 19:46:55
JS扩展方法实例分析
2024-04-25 10:35:54
精简高效的CSS命名准则和方法
2010-09-17 18:38:00
如何判断用户在某一页面逗留了多长时间?
2010-01-18 20:48:00
详解MySQL 8.0 之不可见索引
2024-01-22 17:41:46