vue3实现无缝滚动列表效果(大屏数据轮播场景)

 更新时间:2024年07月14日 14:04:19   作者:蒾酒  
vue3-scroll-seamless 是一个用于 Vue 3 的插件,用于实现无缝滚动的组件,它可以让内容在水平或垂直方向上无缝滚动,适用于展示轮播图、新闻滚动、图片展示等场景,本文就给大家介绍了vue3实现无缝滚动列表效果,需要的朋友可以参考下

实现思路

vue3目前可以通过第三方组件来实现这个需求。

下面介绍一下这个第三方滚动组件--vue3-scroll-seamless

vue3-scroll-seamless 是一个用于 Vue 3 的插件,用于实现无缝滚动的组件。它可以让内容在水平或垂直方向上无缝滚动,适用于展示轮播图、新闻滚动、图片展示等场景。

主要特性和用法

  1. 无缝滚动:在内容超出容器宽度或高度时,可以实现自动无缝滚动,形成连续的视觉效果。

  2. 多种配置选项:提供了多种配置选项来控制滚动的速度、方向、内容显示方式等。

  3. 响应式支持:支持响应式设计,可以根据父容器的大小自动调整内容的显示和滚动效果。

  4. 灵活的内容布局:内容可以是任意的 Vue 组件或 HTML 元素,可以自定义每一项的样式和内容。

  5. 事件和方法:支持一些事件回调和方法,例如滚动到指定位置、开始、暂停、重新开始滚动等。

官网地址:vue3-scroll-seamless | vue3-scroll-seamless (xiaofulzm.github.io)

建议去参考网文档使用。

无缝滚动列表实现

安装依赖

npm install vue3-scroll-seamless --save

main.js/ts导入

// 导入Vue3 Scroll  Seamless组件
import {vue3ScrollSeamless} from "vue3-scroll-seamless";
 
// 注册 Vue3 Scroll Seamless 组件
app.component('vue3ScrollSeamless',vue3ScrollSeamless)
 
// 挂载Vue应用
app.mount('#app')

实现代码示例

以上代码用到了element-plus的el-row和el-col组件

<script lang="ts" setup>
import { reactive } from "vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
const list = reactive([
  { trainNumber: 'G1234', destination: '北京南', departureTime: '09:00', status: '准点' },
  { trainNumber: 'G5678', destination: '上海虹桥', departureTime: '09:15', status: '准点' },
  { trainNumber: 'D4321', destination: '广州南', departureTime: '09:30', status: '晚点' },
  { trainNumber: 'G8765', destination: '成都东', departureTime: '09:45', status: '准点' },
  { trainNumber: 'G9876', destination: '西安北', departureTime: '10:00', status: '准点' },
  { trainNumber: 'D6543', destination: '深圳北', departureTime: '10:15', status: '准点' },
  { trainNumber: 'G2345', destination: '重庆北', departureTime: '10:30', status: '晚点' },
  { trainNumber: 'G1111', destination: '天津西', departureTime: '10:45', status: '准点' },
  { trainNumber: 'G2222', destination: '南京南', departureTime: '11:00', status: '晚点' },
  { trainNumber: 'D3333', destination: '杭州东', departureTime: '11:15', status: '准点' },
  { trainNumber: 'G4444', destination: '武汉', departureTime: '11:30', status: '准点' },
  { trainNumber: 'G5555', destination: '济南西', departureTime: '11:45', status: '准点' },
  { trainNumber: 'D6666', destination: '长沙南', departureTime: '12:00', status: '晚点' },
  { trainNumber: 'G7777', destination: '南昌西', departureTime: '12:15', status: '准点' },
  { trainNumber: 'G8888', destination: '沈阳北', departureTime: '12:30', status: '准点' },
  { trainNumber: 'D9999', destination: '福州南', departureTime: '12:45', status: '准点' },
  { trainNumber: 'G1010', destination: '哈尔滨西', departureTime: '13:00', status: '晚点' }
 
]);
const classOptions = reactive({
  step: 0.5,//滚动速度值越大越快,但是值太小会卡顿
  limitMoveNum: list.length,//无缝滚动列表元素的长度,一般设置为列表的长度
  direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
 
});
 
</script>
 
<template>
  <div class="demo">
    <div class="title-container">
      <div class="title">车次信息展示列表</div>
    </div>
    <div class="table-header">
      <div class="header">
        <el-row>
          <el-col :span="6" class="center">
            <div>车次</div>
          </el-col>
          <el-col :span="6" class="center">
            <div>目的地</div>
          </el-col>
          <el-col :span="6" class="center">
            <div>发车时间</div>
          </el-col>
          <el-col :span="6" class="center">
            <div>状态</div>
          </el-col>
        </el-row>
      </div>
    </div>
 
    <vue3ScrollSeamless class="scroll-wrap border text-color" :classOptions="classOptions" :dataList="list">
      <div v-if="list.length > 0">
        <el-row v-for="(item, i) of list" :key="i">
          <el-col :span="6" class="center">
            <div>{{ item.trainNumber }}</div>
          </el-col>
          <el-col :span="6" class="center">
            <div>{{ item.destination }}</div>
          </el-col>
          <el-col :span="6" class="center">
            <div style="width: 30px;">{{ item.departureTime }}</div>
          </el-col>
          <el-col :span="6" class="center">
            <div style="width: 30px;">{{ item.status }}</div>
          </el-col>
        </el-row>
      </div>
      <div v-if="list.length == 0"
        style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;">
        暂无预测记录</div>
    </vue3ScrollSeamless>
  </div>
</template>
<style scoped>
.title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin-bottom: 20px;
}
 
.title {
  font-size: 19px;
}
 
.demo {
  width: 100%;
  height: 100%;
}
 
.scroll-wrap {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  background-color: rgb(0, 5, 38, 0.5);
  font-size: 15px;
}
 
.table-header {
  font-family: Arial, sans-serif;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid rgb(13, 162, 221);
  background-color: rgba(3, 137, 174, 0.5);
}
 
.header {
  width: 100%;
  font-size: 16px;
}
 
.border {
  border: 1px solid rgb(13, 162, 221);
}
 
.center {
  display: flex;
  align-items: center;
  justify-content: center;
 
}
 
.text-color {
  color: rgb(128, 250, 124);
}
</style>

效果展示

到此这篇关于vue3实现无缝滚动列表效果(大屏数据轮播场景)的文章就介绍到这了,更多相关vue3无缝滚动列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue解决花括号数据绑定不成功的问题

    vue解决花括号数据绑定不成功的问题

    今天小编就为大家分享一篇vue解决花括号数据绑定不成功的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 详解Vue如何进行分布式事务管理以及解决方案

    详解Vue如何进行分布式事务管理以及解决方案

    在分布式系统中,事务管理是一个非常重要的问题,所以本文将介绍一下Vue中如何进行分布式事务管理以及分布式事务解决方案,希望对大家有所帮助
    2023-06-06
  • Vue3中watch监听的五种情况详解

    Vue3中watch监听的五种情况详解

    watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑,本文将给大家介绍了Vue3中watch监听的五种情况,文中通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-03-03
  • avue-crud多级复杂的动态表头的实现示例

    avue-crud多级复杂的动态表头的实现示例

    Avue.js 是基于现有的element-ui库进行的二次封装,本文主要介绍了avue-crud多级复杂的动态表头,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue中this.$refs.name.offsetHeight获取不到值问题

    vue中this.$refs.name.offsetHeight获取不到值问题

    这篇文章主要介绍了vue中this.$refs.name.offsetHeight获取不到值问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 在Vue项目中使用Typescript的实现

    在Vue项目中使用Typescript的实现

    这篇文章主要介绍了在Vue项目中使用Typescript的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Vue组件跨层级获取组件操作

    Vue组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • VUE更换背景颜色的方法

    VUE更换背景颜色的方法

    这篇文章主要介绍了VUE更换背景颜色的方法, 在这个示例中,我们使用了一个backgroundColor变量来存储当前页面的背景颜色,当用户点击按钮时,我们通过调用setBackgroundColor方法来更改背景颜色,并将背景颜色同时应用于body元素,需要的朋友可以参考下
    2024-03-03
  • vue实现下拉框筛选表格数据

    vue实现下拉框筛选表格数据

    这篇文章主要为大家详细介绍了vue实现下拉框筛选表格数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)

    vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)

    这篇文章主要介绍了vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论