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;
}
相关推荐
拾光拾趣录几秒前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia1 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽2 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥3 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02347 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder12 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder13 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep20 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛25 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i34 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css