Vue3 列表自动滚动播放（表头固定、列表内容自动滚动播放）+ vue3-seamless-scroll - 附完整示例

vue3-seamless-scroll：Vue3.0 无缝滚动组件，支持Vite2.0，支持服务端打包

目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，目前组件支持平台与Vue3.0支持平台一致。

目录

效果

 一、介绍

 1、官方文档

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、注册

        1）在main.ts/js文件中全局组件注册

        2）在单个.vue单文件局部注册

2、设置容器宽高

3、样式处理（关键点）

        1）统一表头和列表内容的宽度

        2）设置列表自动滚动播放并设置自动滚动播放速度等

        3）设置关键样式

四、完整示例

 欢迎扫描下方二维码关注VX公众号

---

效果

 一、介绍

 1、官方文档

vue3-seamless-scroll - npm

vue3-seamless-scroll - npmVue3.0 无缝滚动组件. Latest version: 2.0.1, last published: 2 years ago. Start using vue3-seamless-scroll in your project by running `npm i vue3-seamless-scroll`. There are 22 other projects in the npm registry using vue3-seamless-scroll.https://www.npmjs.com/package/vue3-seamless-scroll

2、官方示例

二、准备工作

1、安装依赖包

npm install vue3-seamless-scroll --save

yarn add vue3-seamless-scroll

 2、示例版本 

"vue3-seamless-scroll": "^2.0.1",

三、使用步骤

1、注册

        1）在main.ts/js文件中全局组件注册

import { createApp } from 'vue';

import vue3SeamlessScroll from 'vue3-seamless-scroll';

const app = createApp(App);

app.use(vue3SeamlessScroll);

        2）在单个.vue单文件局部注册

<script lang="ts" setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
</script>

注：这里以局部注册为例

2、设置容器宽高

<template>
  <div class="scroll-wrap"></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
</script>

<style scoped>
  .scroll-wrap {
    width: 500px;
    height: 350px;
	overflow: hidden;
  }
</style>

3、样式处理（关键点）

        1）统一表头和列表内容的宽度

<div class="scroll-wrap">
  <div class="scroll-header">
    <ul class="scroll-ul">
      <li class="scroll-li">
        <span style="min-width: 80px; width: calc(100% - 180px)">标题</span>
        <span style="width: 180px">日期</span>
      </li>
    </ul>
  </div>
  <div class="scroll-content">
    <vue3-seamless-scroll class="scroll-list" :list="list">
      <ul class="scroll-ul" v-for="(item, index) in list" :key="index">
        <li class="scroll-li">
          <span style="min-width: 80px; width: calc(100% - 180px)">{{ item.title }}</span>
          <span style="width: 180px">{{ item.date }}</span>
        </li>
      </ul>
    </vue3-seamless-scroll>
  </div>
</div>

        2）设置列表自动滚动播放并设置自动滚动播放速度等

<div class="scroll-content">
  <vue3-seamless-scroll
    class="scroll-list"
	:list="alarmData"
	v-model="scrollFlag"
	:hover="true"
	:step="0.4"
	:wheel="true"
	:isWatch="true"
	:limitScrollNum="6"

  >
    ...
  </vue3-seamless-scroll>
</div>

注：limitScrollNum：开启滚动的数据量，只有列表长度大于等于该值才会滚动。根据实际情况设置，在本文示例中需要设为“6”

  3）设置关键样式

.scroll-list {
  width: 100%;
  overflow: hidden;
}

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

四、完整示例

<template>
  <div class="scroll-wrap">
    <div class="scroll-header">
      <ul class="scroll-ul">
        <li class="scroll-li">
          <span style="min-width: 80px; width: calc(100% - 180px)">标题</span>
          <span style="width: 180px">日期</span>
        </li>
      </ul>
    </div>
    <div class="scroll-content">
      <vue3-seamless-scroll
        class="scroll-list"
	    :list="alarmData"
	    v-model="scrollFlag"
    	:hover="true"
	    :step="0.4"
	    :wheel="true"
	    :isWatch="true"
	    :limitScrollNum="7"

      >
        <ul class="scroll-ul" v-for="(item, index) in list" :key="index">
          <li class="scroll-li">
            <span style="min-width: 80px; width: calc(100% - 180px)">{{ item.title }}</span>
            <span style="width: 180px">{{ item.date }}</span>
          </li>
        </ul>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const list = ref([
  {
    title: "Vue3.0 无缝滚动组件展示数据第1条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第2条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第3条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第4条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第5条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第6条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第7条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第8条",
    date: Date.now(),
  },
  {
    title: "Vue3.0 无缝滚动组件展示数据第9条",
    date: Date.now(),
  },
]);

sessionStorage.setItem('num', 888)
console.log(sessionStorage.getItem('num'));
    
</script>

<style scoped>
.scroll-wrap {
  width: 500px;
  height: 350px;
  overflow: hidden;
}
.scroll-header,
.scroll-content {
  width: 100%;
	display: flex;
}
.scroll-list {
  width: 100%;
  overflow: hidden;
}
.scroll-ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-li {
  width: 100%;
  display: flex;
  line-height: 35px;
}
.scroll-li > span {
  display: flex;
  height: 35px;
  line-height: 35px;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  padding-left: 5px;
  overflow: hidden;
}
.scroll-li > span:last-child {
  border-right: 1px solid #dcdfe6;
}
.scroll-header .scroll-li {
  background-color: #F8F9FF;
}
.scroll-header .scroll-li > span {
  font-weight: bold; 
  border-top: none;
}
.scroll-content .scroll-ul:last-child .scroll-li {
  border-bottom: 1px solid #dcdfe6;
}
</style>

 欢迎扫描下方二维码关注VX公众号