vue-seamless-scroll 循环滚动

229 阅读1分钟

vue-seamless-scroll 循环滚动

vue-seamless-scroll 循环滚动_不想学习只想玩的博客-CSDN博客

    <div class="qual-list">
    
      <vue-seamless-scroll :data="list" :class-option="optionSingleHeightTime" class="seamless-list">

        <ul class="box" ref="box">

          <li class="box-li" v-for="(item, i) in list" :key="i" @click="quickQua()">

            <img :src="item.img" :alt="item.name" />

            <div class="name">{{ item.name }}</div>

          </li>

        </ul>

      </vue-seamless-scroll>
      
    </div>

  computed: {
    optionSingleHeightTime() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },