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

安装包

bash 复制代码
npm install vue3-seamless-scroll --save

全局注册

在main.js中进行全局注册

bash 复制代码
  // **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');

使用组件

数据准备:list是一个对象数组,

bash 复制代码
const tableData = [
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  }
  .....
];

html

bash 复制代码
<vue3-seamless-scroll :list="list" class="scroll">
    <div class="item" v-for="(item, index) in list" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </vue3-seamless-scroll>

css

必须设置height和overflow: hidden;

bash 复制代码
.scroll {
  height: 270px;
  width: 500px;
  margin: 100px auto;
  overflow: hidden;
}
相关推荐
gnip13 分钟前
SSE技术介绍
前端·javascript
yinke小琪27 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿31 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux32 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵34 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆36 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
again43237 分钟前
css生效规则
css
豆苗学前端40 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_40 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
Esun_R41 分钟前
使用CSS选择器选择列表中最后一个子元素的几种情况
css