vue 列表无限滚动

借助vue-seamless-scroll工具

1、npm i vue-seamless-scroll --save

2、列表中引入组件

import vueSeamlessScroll from "vue-seamless-scroll/src";

  components: {

    vueSeamlessScroll,

  },

3、使用组件，包裹需要滚动的列表区域

<div class="listView">//限制滚动区域大小

// menuListData 滚动的数据数组

// defaultOption 滚动设置选项

    <vueSeamlessScroll :data="menuListData" class="mainContent" :class-option="defaultOption">

      <div class="mainContent">

        <div v-for="menuItem in menuListData" :key="menuItem.id" class="menuItem">

          <img :src="menuItem.tb" :alt="menuItem.mc" srcset="" >

        </div>

      </div>

    </vueSeamlessScroll>

  </div>

4、设置滚动配置项

    const defaultOption = ref({

      step: 0.2, // 数值越大速度滚动越快

      limitMoveNum: menuListData.value.length, // 开始无缝滚动的数据量

      hoverStop: false, // 是否开启鼠标悬停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)

    });

5、补充数据，非必须

问题一：设计稿样式是4*3，一屏展示12条数据，，当数据超过12条且不是12倍数时，末尾会有空白列

问题二：数据过少时，数据循环渲染不及时，空白背景滚动一段时间后，组件才展示出来

let count = menuListData.value.length % 12;//计算对12的倍数

      let repeat = 0;//记录数据需要叠加的倍数

      if (menuListData.value.length < 2) {//只有一条数据时，直接拉满全屏12条

        repeat = 11;

      } else if (menuListData.value.length < 6) {//数据小于6条时

        if (count % 3 != 0) {//只有三条数据，拉满两屏数据

          repeat = 8;

        } else {//其他情况补充至3的倍数

          repeat = 5;

        }

      } else if (menuListData.value.length < 12) {//少于12条数据时

        if (count % 3 != 0) {

          repeat = 5;

        } else {

          repeat = 4;

        }

      } else if (count % 3 != 0) {

        repeat = 3;

      } else {

        repeat = 1

      }

      for (let index = 0; index < repeat; index++) {//按计算的倍数叠加数据

        menuListData.value.push(...props.menuData)

      }