【Vue3】vue3-seamless-scroll实现无缝滚动+滚轮控制

精选原创

爱编程的小学究 2024-07-08 18:31:57 博主文章分类：Vue ©著作权

文章标签 无缝滚动 Boo 鼠标悬停 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者爱编程的小学究的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

目标

1 掌握vue3-seamless-scroll使用方法 2 vue2是否可以使用vue3-seamless-scroll插件

基本使用

前期工作

创建一个vue3项目，在项目中安装第三方组件 1 安装

npm install vue3-seamless-scroll --save

2 引入并注册

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { defineComponent,ref } from "vue";
export default defineComponent({
  name: "SeamlessScroll",
  components: {Vue3SeamlessScroll}   
});

3 使用组件

<vue3-seamless-scroll>
 // 要滚动的内容
</vue3-seamless-scroll>

在正式开始之前，先看一下这个第三方组件有哪些参数或者属性官方文档：vue3-seamless-scroll 组件配置

key	描述	默认值	类型
step	滚动速度	1	Number
limitMoveNum	开始无缝滚动的最小数据量	5	Number
hover	是否开启鼠标悬停stop	true	Boolean
direction	方向：up，down，left，right	up	String
wheel	在开启鼠标悬停的情况下是否开启滚轮滚动	false	Boolean
copyNum	拷贝列表次数	1	Number

以上仅列出了接下来可能用到的属性。

表格列滚动效果实现

这里用的是el-table表格组件。若直接将el-table表格插入到vue-seamless-scroll组件中，会导致el-table表格中的表头也会进行滚动，这不是想要的效果。这里用两个el-table，一个保留表头部分，一个保留内容部分。保留内容部分的放入vue-seamless-scroll组件中进行无缝滚动。

     <!-- 第一个表格 保留头部 -->
      <el-table class="table" :data="tableData">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="age" label="年龄" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
      <vue3-seamless-scroll
        v-model="isPause"
        class="scroll"
        :list="tableData"
        :limitScrollNum="scrollOptions.limitScrollNum"
        :step="scrollOptions.step"
        :hover="scrollOptions.hover"
        :copyNum="scrollOptions.copyNum"
        :wheel="scrollOptions.wheel"
        :direction="scrollOptions.direction"
      >
        <el-table class="scroll-content" :data="tableData">
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            width="180"
          ></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </vue3-seamless-scroll>

样式

.table .el-table__body-wrapper {
  display: none;
}
.scroll-content .el-table__header {
  display: none;
}
.scroll {
  height: 280px;
  overflow: hidden;
}
.scroll-content {
  overflow: hidden;
}

vue3-seamless-scroll插件中给了一个wheel配置，当为true的时候可以开启滚轮控制。最终的效果：