vue页面如何利用插件实现列表滚动循环

vue页面如何利用vue-seamless-scroll插件实现列表滚动循环，下面web建站小编给大家详细介绍一下实现代码！

1、安装脚手架

cnpm install vue-seamless-scroll --save

2、页面调用

<template>
  <vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp" :class-option="classOption">
    <ul>
      <li class="DataList_top" v-for="(item,index) in CardPartsStatisticsList" :key="index" v-if="index < 5">
        <div class="DataList_left">{{index+1}}</div>
        <div class="DataList_left">{{item.itemname}}</div>
        <div class="DataList_left">{{item.number}}</div>
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

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

<style>
.seamless-warp{
 width: 100%;
 height: calc(100% - 16px);
 overflow: hidden;
}
</style>

html利用marquee标签实现滚动效果（上下左右）

标签： vue-seamless-scroll, 插件, 文字滚动

上面是“vue页面如何利用插件实现列表滚动循环”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3040.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！