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;
}
相关推荐
toooooop814 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_14 小时前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy14 小时前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全14 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101214 小时前
[前端]1.html基础
前端·笔记·学习·html
白水清风14 小时前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy14 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全14 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
小天呐15 小时前
qiankun 微前端接入实战
前端·js·微前端
周航宇JoeZhou15 小时前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台