【 vue 无限滚动】- 无缝滚动的解决方法

田田925

已于 2024-03-06 16:23:18 修改

阅读量1.3k

点赞数 17

文章标签： vue.js javascript 前端

于 2024-02-28 14:30:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_64461654/article/details/136344936

版权

本文介绍了如何在Vue项目中使用vue-seamless-scroll插件实现无限滚动的表格，包括安装依赖、全局或局部引入方式，以及如何配置相关属性以满足开发需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-seamless-scroll 插件-无缝滚动

需求：实现一个无限滚动的表格

解决方案：使用 vue-seamless-scroll插件，这是一个基于Vue.js的无缝滚动插件，支持上下左右无缝滚动、单步滚动，以及支持水平方向的手动切换功能，配置多，满足日常开发需求，基于requestAnimationFrame实现，下面给大家介绍一下使用详细：

1.安装相关依赖

//vue2
npm install vue-seamless-scroll --save

//vue3
npm install vue3-seamless-scroll --save

2.全局引入或者局部引入（二选一即可）

2.1 全局引入的方式

//vue2
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

//vue3 代码多去少补
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');

2.2局部引入的方式

//组件使用三步骤1、引入 2、注册 3、使用

//vue2
import vueSeamlessScroll from 'vue-seamless-scroll' //引入
components: { //注册
vueSeamlessScroll
},　
<vue-seamless-scroll></vue-seamless-scroll> //使用

//vue3
import { defineComponent } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";//引入
export default defineComponent({
components: { //注册
Vue3SeamlessScroll
}
})
<vue3-seamless-scroll></vue3-seamless-scroll> //使用

3.组件使用，配置相关属性；

//vue2----------------------------------------------------------------------------
<template>
//这里写的行内样式，需要时自己补充
<vue-seamless-scroll
class="scroll_box"
:data="dataList"
:class-option="defineScroll"
style="
height: 100%;
overflow: hidden;
width: 100%;
color: white;
font-size: 18px;
text-align: center;
"
>
<ul>
<li
v-for="(item, index) in dataList"
:key="index"
style="padding: 10px 0; margin: 5px"
>
<span class="name">{{ item.name }}</span>
<span class="Etiology">{{ item.Etiology }}</span>
<span class="status">{{ item.status }}</span>
<span class="time">{{ item.time }}</span>
</li>
</ul>
</vue-seamless-scroll>
</template>

data() {
return {
dataList: [
{
time: "XXXXXXXXX",
name: "XX",
Etiology: "XX",
status: "XXX",
},
......
],
};
},
//定义计算属性，默认执行一次（监听，类似于data概念）；
computed: {
defineScroll() {
return {
step: 0.5, // 数值越大速度滚动越快
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)
};
},
},

//vue3 ---------------------------------------------------------------------
<vue3-seamless-scroll
hover-stop="true"
:list="listData"
hover="true"
step="0.3">
<div
v-for="(item, index) in listData"
:key="index"
class="item"
style="padding: 10px; margin: 5px; font-size: 14px"
>
<span
v-for="(value, key, ind) in item"
:key="ind"
class="spanClass">
{{value}}
</span>
</div>
</vue3-seamless-scroll>