vue3实现无缝滚动列表-vue3-seamless-scroll

 

vue3-seamless-scroll-无缝滚动

        vue3-seamless-scroll,顾名思义是应用在vue3项目中,在Vue3项目中难免会遇到让列表无缝滚动的需求,本篇文章介绍了关于vue3项目中如何实现表格内容无缝滚动及其属性的使用,需要的朋友可以参考一下。
        官网介绍:支持Vite2.0,支持服务端打包,目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,目前组件支持平台与Vue3.0支持平台一致。

vue3-seamless-scroll 官网

vue2项目中使用-vue-seamless-scroll,参考文档请见:vue实现循环滚动列表-vue-seamless-scroll

一、安装

  •  npm
        npm install vue3-seamless-scroll --save
  • Yarn
        yarn add vue3-seamless-scroll
  • browser
<script src="https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js"></script>

 

二、组件配置

### list

无缝滚动列表数据,组件内部使用列表长度。

type: Array

required: true

### v-model

通过v-model控制动画滚动与停止,默认开始滚动

type: Boolean,

default: true,

required: false

### direction

控制滚动方向,可选值up,down,left,right

type: String,

default: “up”,

required: false

### isWatch

开启数据更新监听

type: Boolean,

default: true,

required: false

### hover

是否开启鼠标悬停

type: Boolean,

default: false,

required: false

### count

动画循环次数,默认无限循环

type: Number,

default: “infinite”,

required: false

### limitScrollNum

开启滚动的数据量,只有列表长度大于等于该值才会滚动

type: Number,

default: 5,

required: false

### step

步进速度

type: Number,

required: false

### singleHeight

单步运动停止的高度

type: Number,

default: 0,

required: false

### singleWidth

单步运动停止的宽度

type: Number,

default: 0,

required: false

### singleWaitTime

单步停止等待时间(默认值 1000ms)

type: Number,

default: 1000,

required: false

### isRemUnit

singleHeight and singleWidth 是否开启 rem 度量

type: Boolean,

default: true,

required: false

### delay

动画延时时间

type: Number,

default: 0,

required: false

### ease

动画效果,可以传入贝塞尔曲线数值

type: String | cubic-bezier,

default: “ease-in”,

required: false

### copyNum

拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果

type: Number,

default: 1,

required: false

### wheel

在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启

type: boolean,

default: false,

required: false

### singleLine

启用单行横向滚动

type: boolean,

default: false,

required: false

注意项

        需要滚动的列表所在容器必须设置样式 overflow: hidden;

三、使用 

    1. 注册组件

  • 全局注册
// **main.js**import { createApp } from 'vue';import App from './App.vue';import vue3SeamlessScroll from "vue3-seamless-scroll";const app = createApp(App);app.use(vue3SeamlessScroll);app.mount('#app');
  • 单个.vue文件局部注册
<script>import { defineComponent } from "vue";import { Vue3SeamlessScroll } from "vue3-seamless-scroll";export default defineComponent({components: {Vue3SeamlessScroll}})
</script>

    2. 使用组件 

        (这里直接是封装了一个独立的组件(假数据),有需要的可以直接拿走使用)

<!-- 动态上下翻滚的表格 -->
<template><div class="table-wrap"><div class="titleContent"><div class="tit">日期</div><div class="tit">开始时间</div><div class="tit">结束时间</div><div class="tit">应到人数</div><div class="tit">实到人数</div><div class="tit">实到占比</div></div><!-- 配置详情请见 README.md --><vue3-seamless-scroll:list="periodDataList"class="scroll"direction="up":step="0.9":hover="true":limit-scroll-num="7":is-watch="true":single-height="0":single-width="0":single-wait-time="1000":wheel="false"><div class="countContent" v-for="(item, i) in periodDataList" :key="i"><div class="descr">{{ item.dateTime }}</div><div class="descr">{{ item.startTime }}</div><div class="descr">{{ item.endTime }}</div><div class="descr">{{ item.shouldArriveNumber }}</div><div class="descr">{{ item.actualAttendance }}</div><div class="descr">{{ item.bl }}</div></div></vue3-seamless-scroll></div>
</template><script setup lang="ts">
import { ref } from "vue";const periodDataList = ref<any>([{dateTime: "2022-05-03",startTime: "2022-05-03",endTime: "2022-05-03",shouldArriveNumber: "1",actualAttendance: "100",bl: "10%"},{dateTime: "2022-05-03",startTime: "2022-05-03",endTime: "2022-05-03",shouldArriveNumber: "2",actualAttendance: "200",bl: "10%"},{dateTime: "2022-05-03",startTime: "2022-05-03",endTime: "2022-05-03",shouldArriveNumber: "3",actualAttendance: "300",bl: "10%"},{dateTime: "2022-05-03",startTime: "2022-05-03",endTime: "2022-05-03",shouldArriveNumber: "4",actualAttendance: "400",bl: "10%"},{dateTime: "2022-05-03",startTime: "2022-05-03",endTime: "2022-05-03",shouldArriveNumber: "5",actualAttendance: "500",bl: "10%"},{dateTime: "2022-05-03",startTime: "2022-05-03",endTime: "2022-05-03",shouldArriveNumber: "6",actualAttendance: "600",bl: "10%"},{dateTime: "2022-05-03",startTime: "2022-05-03",endTime: "2022-05-03",shouldArriveNumber: "7",actualAttendance: "700",bl: "10%"},{dateTime: "2022-05-03",startTime: "2022-05-03",endTime: "2022-05-03",shouldArriveNumber: "8",actualAttendance: "800",bl: "10%"}
]);
</script><style lang="scss" scoped>
.table-wrap {width: 100%;// padding: 0 20px;color: #ffffff;.scroll {max-height: 278px;overflow: hidden;}
}
.titleContent {display: flex;align-items: center;justify-content: space-between;height: 40px;.tit {flex: 0 0 16.6%;text-align: center;}
}
.countContent {display: flex;flex-wrap: wrap;justify-content: space-between;width: 100%;font-size: 14px;.descr {flex: 0 0 16%;padding: 10px 0;text-align: center;}
}
.countContent:nth-of-type(odd) {background: #318699 !important;.descr {border-right: 1px solid #247587;}
}
</style>

 效果:

vue3-seamless-scroll-无缝滚动

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/32984.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

太速科技-基于AD916X的直流至 12 GHz 矢量信号发生器 FMC子卡

基于AD916X的直流至 12 GHz 矢量信号发生器 FMC子卡 一、DAC 性能指标&#xff1a; ● DAC 型号&#xff1a;AD9163。 ● 分辨率&#xff1a;16bits。 ● DAC 更新速率&#xff1a;12GSPS。 ● 6GSPS 直接 RF 频率合成。 ● 直流至 3GHz&#xff08;不归零 NRZ 模式&…

VB.net调用VC DLL(二)

参考文献5&#xff0c;讲了在C程序中直接调用DLL和lib的函数方法&#xff0c;不是通过编译器连接方式 也讲了在非C程序中直接调用DLL和lib的函数方法。 实操了一下&#xff0c;建了win32dll项目 新建.h文件和.cpp文件 .h文件中加&#xff1a; void __stdcall funcA(double…

粉笔1000题——判断推理

目录 一、图形推理1. 位置规律平移旋转、翻转 二、定义判断三、类比推理四、逻辑判断 一、图形推理 1. 位置规律 平移 旋转、翻转 二、定义判断 三、类比推理 四、逻辑判断

Python+Pytest+Yaml+Request+Allure框架源代码之(一)common公共方法封装

common模块&#xff1a; get_path.py&#xff1a;获取路径方法 # -*- coding: UTF-8 -*- import os# 项目根目录 BASE_DIR os.path.dirname(os.path.dirname(os.path.abspath(__file__)))# 配置文件目录 CONFIG_DIR os.path.join(BASE_DIR,config)# 测试用例文件目录 TESTCA…

[SAP ABAP] 删除内表数据

1.利用索引删除数据 语法格式 DELETE <itab> INDEX <idx>. <itab>&#xff1a;代表内表 <idx>&#xff1a;代表索引值 删除内表<itab>中的第<idx>条记录 示例1 lt_student内表中存在3条数据记录 我们使用如下指令删除内表中的第一条数…

Linux 7种 进程间通信方式

传统进程间通信 通过文件实现进程间通信 必须人为保证先后顺序 A--->硬盘---> B&#xff08;B不知道A什么时候把内容传到硬盘中&#xff09; 1.无名管道 2.有名管道 3.信号 IPC进程间通信 4.消息队列 5.共享内存 6.信号灯集 7.socket通信 一、无名管道&a…

mysql中in参数过多该如何优化

优化方式概述 未优化前 SELECT * FROM rb_product rb where sku in(1022044,1009786)方案2示例 public static void main(String[] args) {//往list里面设置3000个值List<String> list new ArrayList<>();for (int i 0; i < 3000; i) {list.add(""…

我在高职教STM32——LCD液晶显示(3)

大家好&#xff0c;我是老耿&#xff0c;高职青椒一枚&#xff0c;一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次&#xff0c;同行应该都懂的&#xff0c;老师在课堂上教学几乎是没什么成就感的。正因如此&#xff0c;才有了借助 CSDN 平台寻求认同感和成就…

Matplotlib的原理与使用详解

文章目录 引言Matplotlib 的原理1. 底层结构2. 绘图流程3. 绘图引擎 Matplotlib 的使用1. 基本使用流程2. 自定义图表3. 保存图表 结论 引言 Matplotlib 是一个 Python 的 2D 绘图库&#xff0c;它提供了丰富的绘图接口&#xff0c;使得用户能够轻松创建各种高质量的图表。从简…

利用 Microsoft ChatGPT 和 OPC UA 改变工业格局

在本文中&#xff0c;我们将探讨开放性在工业物联网中的作用&#xff0c;以及Microsoft为创建基于OPC UA的开放平台所做的努力。我们将讨论 Microsoft 开放战略的四大支柱&#xff0c;以及标准化信息模型以实现互操作性的重要性。此外&#xff0c;我们将深入探讨传统接口和数据…

Redis单线程为什么快

首先&#xff0c;需要明确&#xff0c;Redis只有redis-server是单线程的&#xff0c;指所有的命令处理流程在一个线程中处理。 Redis是内存数据库&#xff0c;所有操作都是基于内存的&#xff0c; 不是CPU密集型的。数据结构高效&#xff0c;不同的对象类型有不同的具体实现。…

一键智能整理TXT文档,高效删除连续行,轻松提升工作效率与数据管理效能

信息爆炸的时代&#xff0c;TXT文档作为我们日常工作中不可或缺的一部分&#xff0c;承载着大量的数据和信息。然而&#xff0c;随着文档内容的不断增加&#xff0c;连续重复的行数也逐渐增多&#xff0c;这不仅影响了文档的整洁度&#xff0c;还大大降低了我们处理数据的效率。…

自己本次吃东西的反思:

使用吃东西来应对情绪是一种常见的习惯&#xff0c;但长期来看&#xff0c;可能不是最健康的应对机制。以下是一些建议&#xff0c;帮助你找到更平衡的应对情绪的方法&#xff1a; 1. **意识到习惯**&#xff1a; - 首先&#xff0c;意识到你在不同情绪状态下使用食物作为应对机…

Java集合框架源码分析:HashSet

一、HashSet特性 特性描述是否允许为null允许是否允许数据重复不允许是否有序无序是否线程安全非线程安全 二、HashSet底层实现 HashSet的底层实现是基于HashMap的。构造方法如下&#xff1a; public HashSet() {map new HashMap<>();}public HashSet(int initialCap…

Shell语法全解

Shell基础语法全解 一、shell简介二、shell格式2.1 新建一个shell脚本文件2.2 执行脚本方式 三、变量3.1系统变量3.2自定义变量3.3 特殊变量3.3.1 $n 传入变量3.3.2 $# 输入参数个数3.3.3 $*、$ 输入参数内容3.3.4 $? 上一条命令执行结果 四、运算符 $[]、$(())五、条件判断5.…

Monica

在 《long long ago》中&#xff0c;我论述了on是一个刚出生的孩子的脐带连接在其肚子g上的形象&#xff0c;脐带就是long的字母l和字母n&#xff0c;l表脐带很长&#xff0c;n表脐带曲转冗余和连接之性&#xff0c;on表一&#xff0c;是孩子刚诞生的意思&#xff0c;o是身体&a…

24年下半年各省自考报名时间汇总

24年下半年各省自考报名时间汇总

shell学习笔记

一、Shell概述 Shell是一个命令行解释器&#xff0c;它接收应用程序/用户命令&#xff0c;然后调用操作系统内核 Shell还是一个功能强大的编程语言&#xff0c;易编写、易调试&#xff0c;灵活性强。 Shell程序文件对后置名无要求&#xff0c;一般使用.sh作为后缀 程序书写以#…

【JAVA时间】探索时钟的奥秘

JAVA时间格式&#xff0c;没有那么死板&#xff0c;可以自由组合。你想怎样就怎样&#xff0c;随便你控制。 import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; import java.time.format.DateTimeFormatter;public class DateFormatEx…

2024年【N1叉车司机】考试及N1叉车司机考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 N1叉车司机考试是安全生产模拟考试一点通总题库中生成的一套N1叉车司机考试题库&#xff0c;安全生产模拟考试一点通上N1叉车司机作业手机同步练习。2024年【N1叉车司机】考试及N1叉车司机考试题库 1、【多选题】《中…