Vant轮播多个，实现一次轮播中展示多个div,此处以三个一屏为例
实现效果如下：
实现思路：
1、官方示例是循环列表，如下第一块代码块，从而实现每屏只有一张图片；
2、而需求是，希望每屏多张图片，或是多个div，所以意味着，每屏中不是单个，而是多个，考虑到用列表，用循环嵌套，相当于两层循环；
3、重点来了：所以我们需要给原始列表分组，例如原始数据为[1,2,3,4,5]，需要变成[[1,2,3],[4,5]],实现代码如下第二块代码块。
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" />
</van-swipe-item>
// 给list分组
groupList(list) {
const arr = []
for (var i = 0; i < list.length; i += 3) {
arr.push(list.slice(i, i + 3))
}
return arr
}
这里对于组件引用就赘述了，具体可参考Vant官方文档，对应的html需要改成如下,其中groups为groupList方法的处理结果
<!--轮播图-->
<div class="cont-lb">
<van-swipe :autoplay="3000" :lazy-render="true">
<van-swipe-item v-for="(itemlist, key) in groups" :key="key">
<template v-for="(item, index) in itemlist">
<div :key="index" class="img-class" @click="toXxx(item)">
<span>{{ item.name}}</span>
<img :src="item.img" alt>
</div>
</template>
</van-swipe-item>
</van-swipe>
</div>
附样式修改代码如下：
.cont-lb{
/deep/ .van-swipe__indicator {
background: #bbc0c7;
}
/deep/.van-swipe__indicator--active {
background: #58fa0b;
}
}
.img-class {
background: transparent;
width: 30%;
box-shadow: 0px 2px 12px rgba(100, 101, 102, 0.12);
border-radius: 5px;
border: 0.75px solid #EDEEEF;
float: left;
margin-left: 9px;
}
.img-class > span{
position: absolute;
margin-left: 10.5px;
margin-top: 8.5px;
font-size: 15px;
font-weight: 600;
}
.img-class > img {
width: 100%;
height: 76px;
}