借助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)
}
