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

前端菜菜DayDayUp

于 2024-06-23 16:40:51 发布

阅读量917

点赞数 17

分类专栏： vue3 vue TypeScript 文章标签：前端 vue.js vue3 typescript

本文链接：https://blog.csdn.net/weixin_48594833/article/details/139901578

版权

vue 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

14 篇文章 2 订阅

订阅专栏

TypeScript

1 篇文章 0 订阅

订阅专栏

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 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>