需求说明

        在开发H5的时候，结合Vant组件的轮播组件Swipe实现如下功能。我们查阅vant组件库官方文档可以得知，每个SwipeItem组件代表一个卡片，实现的是每屏展示单张图片或者单个div轮播方式，具体可以查阅：Vant 2 - 轻量、可靠的移动端组件库 (youzan.github.io)

        这里的需求是要实现每屏展示多张图片或者说多个div卡片，那么这个时候就要考虑到多维数组嵌套循环，也就是两层循环。

实现

封装数组转换方法

        通常情况下，后台返回的数据一般都是一维数组结构，那么这个时候我们就需要自行处理数组结构，将一维数组转换为二维数组。我这里封装的一个数组转换方法如下：

  /*** 将一维数组转成二维数组* arr:一维数组* num:二维数组的长度* 返回值：二维数组* */changeArr(arr, num) {let newArr = []for (let i = 0; i < arr.length; i += num) {newArr.push(arr.slice(i, i + num))}return newArr}

页面实现

数据结构

    lightModeList: [{mode_name: '温馨',id: 0,},{mode_name: '浪漫',id: 1,},{mode_name: '起夜',id: 2,},{mode_name: '标准',id: 3,},      {mode_name: '睡眠',id: 4,}]

由于我这里还有一个需求，就是图标数据后台不返回，需要H5本地保存并进行匹配，所以我这里还会用到另外一个方法进行图片字段的处理：

  /*** 给列表数据加上图标匹配* modeList:列表数据* 返回值：加上图标匹配的列表数据* */addIconToModeList(modeList) {let list = modeListfor (let i = 0; i < list.length; i++) {list[i].icon = list[i].id + ''list[i].selectIcon = list[i].id + '_select'}return list},

数据转换

...this.newLightModeList = this.$threeInchCommon.addIconToModeList(this.lightModeList)this.newLightModeList = this.$threeInchCommon.changeArr(this.newLightModeList, 3)
...

页面显示

    <!-- 灯光模式 --><div class="my-swipe"><div class="swipe-title">灯光模式</div><van-swipe :lazy-render="true" indicator-color="#FFBD4F"><van-swipe-item v-for="(itemList, keyIndex) in newLightModeList" :key="keyIndex" class="swiper-item-box"><div v-for="(item,index) in itemList" :key="index" class="swiper-item" @click="selectMode(item)"><div class="swiper-item-img"><img :src="selectLightValue===item.id?getIconImg(item.selectIcon):getIconImg(item.icon"><img :src="selectLightValue===item.id?getIconImg(item.selectIcon):getIconImg(item.icon"></div><div class="swiper-item-text"><p>{{ item.mode_name }}</div></div></van-swipe-item></van-swipe></div>

样式

.my-swipe{width: 100%;margin: 15px 0;background: #fff;padding: 10px 0;border-radius: 15px;.swipe-title{font-size: 16px;color: #333;padding: 10px 0;margin-left: 10px;font-weight: bold;}.swiper-item-box{display: flex;align-items:center;.swiper-item{display: flex;flex-direction: column;align-items:center;width: 33%;.swiper-item-img:active{scale: 1.1;}.swiper-item-img{width: 40px;height: 40px;img{width: 100%;height: 100%;}}.swiper-item-text{font-size: 14px;color: #666;}}}
}