vue3SeamlessScroll实现列表的无限循环滚动

安装：

npm install vue3-seamless-scroll 

全局部署：main.ts

import vue3SeamlessScroll from 'vue3-seamless-scroll'
app.use(vue3SeamlessScroll)

到页面使用

<template>
<div class="header">
 <vue3-seamless-scroll
      class="seamless-warp scroll"
      :list="plansData.data" //对应循环的数据
      :step="0.8"  //速度
      :hover="true"  //点击是否暂停
      style="width: 100%"
      v-model="isScroll"
    >
 <div class="box" v-for="(item, index) in plansData.data" :key="index">
</div>
 </vue3-seamless-scroll>
</div>
</template>
<script>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
const isScroll = ref(true) //默认true开始滚动
</script>
<style>
.seamless-warp scroll {
  height: 300px;
  width: 100%;
  overflow: scroll;
}
.header {
  height: 100%;
  overflow: hidden;
}
</style>

其它功能可参考利用vue3SeamlessScroll简单实现列表的无限循环滚动，仅需几秒配置_vue3 表格循环滚动-CSDN博客

原文地址：https://blog.csdn.net/2301_80636534/article/details/140523876

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！