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-无缝滚动
