vant轮播多个，实现一次轮播中展示多个div,四个一屏为例

实现效果如下：

实现思路：
1、官方示例是循环列表，如下代码块，从而实现每屏只有一张图片；

<van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
</van-swipe-item>

2、我们的需求是，希望每屏多张图片，或是多个div，所以意味着，每屏中不是单个，而是多个，考虑到用列表，用循环嵌套，相当于两层循环；
3、重点来了：需要给原始列表分组，例如原始数据为[1,2,3,4,5]，需要变成[[1,2,3],[4,5,1]],实现代码如下代码块。

//把list这个数组分成多组，四个一组，如果最后一组不能分成四个，就继续取原数组的前几项补齐，凑够四个一组
// 如果list = [1,2,3,4,5,6,7,8,9],分组之后为 list = [[1,2,3,4],[5,6,7,8],[9,1,2,3]]
// 如果list = [1,2,3,4,5,6,7,8],分组之后为 list = [[1,2,3,4],[5,6,7,8]]
// 如果list = [1,2,3,4,5,6,7],分组之后为 list = [[1,2,3,4],[5,6,7,1]]
// 如果list = [1,2,3,4,5,6],分组之后为 list = [[1,2,3,4],[5,6,1,2]]
// 如果list = [1,2,3,4,5],分组之后为 list = [[1,2,3,4],[5,1,2,3]]

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,17];
//数组分解
function arrayResolve(n, arr) {
  //需要补齐的length
  const length = 4 - arr.length % 4;
  for(let i = 0; i < length; i ++){
    arr.push(arr[i]);
  }
  let result = [];
  for (let i = 0; i < arr.length; i += n) {
    result.push(arr.slice(i, i + n));
  }
  return result;
}
console.log(arrayResolve(4, data));

对应的html需要改成如下,其中prizeArr4为arrayResolve方法的处理结果

<van-swipe
  class="my-swipe"
  :touchable="false"
   :autoplay="3000"
   :show-indicators="false"
   indicator-color="white"
 >
   　<van-swipe-item
      style="width: 300px"
      class="swipe-item flex_start"
      v-for="(itemlist, key) in prizeArr4"
      :key="key"
     >
         <div
           class="swip_img_wrap"
           :class="`swip_img_wrap_${index + 1}`"
            v-for="(item, index) in itemlist"
            :key="index"
          >
             <div class="img-class">
                <img :src="item.imgUrl" alt />
             </div>
         </div>
      </van-swipe-item>
</van-swipe>

具体样式需要根据自己项目需求来改，此处就不记录了。以上代码基本上可以实现四个一组轮播展示图片的功能了。