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;
}
相关推荐
LEAFF5 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man7 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬8 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C11 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒2924 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_44 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机1 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星1 小时前
vue实现微信聊天emoji表情
前端·javascript