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;
}
相关推荐
Beekeeper&&P...25 分钟前
web钩子什么意思
前端·网络
过期的H2O236 分钟前
【H2O2|全栈】JS进阶知识(七)ES6(3)
开发语言·javascript·es6
啵咿傲36 分钟前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy39 分钟前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html
流烟默42 分钟前
CSS中Flex布局应用实践总结
前端·css·flex布局
松树戈1 小时前
JS推荐实践
开发语言·javascript·ecmascript
vener_1 小时前
LuckySheet协同编辑后端示例(Django+Channel,Websocket通信)
javascript·后端·python·websocket·django·luckysheet
草字1 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
老码沉思录1 小时前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
没有黑科技1 小时前
基于web的音乐网站(Java+SpringBoot+Mysql)
java·前端·spring boot