无限滚动vue3SeamlessScroll和vueSeamlessScroll组件的使用

清慕

已于 2024-01-10 10:27:58 修改

阅读量1.5k

点赞数 12

文章标签：前端 javascript vue.js

于 2024-01-10 10:21:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53852284/article/details/135496287

版权

本文介绍了如何在Vue3项目中安装并使用vue3-seamless-scroll组件实现无缝滚动效果，包括在main.js中的引入和在模板中的应用示例。同时提到了与vue-seamless-scroll在Vue2中的对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3中使用组件 vue3-seamless-scroll

安装：npm install vue3-seamless-scroll 或者 yarn add vue3-seamless-scroll

在main.js中引用vue3SeamlessScroll

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')

即可在页面中使用

<template>
 <vue3-seamless-scroll :list="hzqyList" direction="right" :isWatch="true" :count="999" :copyNum="99" :hover="false" :singleHeight="0" :singleWidth="0" :step="0.5" :singleWaitTime="0" :limitScrollNum="hzqyList.length" :singleLine="true" class="scroll">
    <div class=" w-full h-[8rem] flex items-center">
        <div v-for="(item, i) in hzqyList" :key="i" class="px-[.2rem] mx-[.5rem] bg-white rounded-lg yy">
            <img :src="item.logo" class="h-[6rem] w-[6rem] rounded-lg">
        </div>
     </div>
 </vue3-seamless-scroll>
</template>

<script setup>
import { ref } from 'vue';

const hzqyList=ref[
{logo:""},
{logo:""},
{logo:""},
{logo:""},
{logo:""},
{logo:""} //图片地址
]
</script>

vue2中使用组件 vue-seamless-scroll

安装：npm install vue-seamless-scroll --save 或者 yarn add vue-seamless-scroll

在页面中直接引用即可

<template>
<div>
     <div class="flex justify-around text-[#A7D3FF] text-center mt-[8px]">
        <div class="w-[48px]">序号</div>
        <div class="w-[60px]">姓名</div>
      </div>
      <vueSeamlessScroll :data="zthdList" :class-option="optionHover" class="h-[380px] overflow-y-scroll">
        <div
          class="flex justify-around items-center text-center banm"
          v-for="(item,i) in zthdList"
          :key="i"
        >
          <div class="w-[48px]">{{i+1}}</div>
          <div class="w-[60px]">{{item.name}}</div>
        </div>
      </vueSeamlessScroll>
</div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll
  },
  data(){
     return {
      zthdList: [
        {name:"张三"},
        {name:"李四"},
        {name:"王五"},
        {name:"张三"},
        {name:"张三"},
        {name:"张三"},
        {name:"张三"},
        {name:"张三"}
        ],
       optionHover: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        autoPlay: true, // 是否自动滚动
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },
    };
  }
}