天津网站制作软件,中国建设机械网网址,如保做网站赢利,西安房地产网站建设需求说明 在开发H5的时候#xff0c;结合Vant组件的轮播组件Swipe实现如下功能。我们查阅vant组件库官方文档可以得知#xff0c;每个SwipeItem组件代表一个卡片#xff0c;实现的是每屏展示单张图片或者单个div轮播方式#xff0c;具体可以查阅#xff1a;Vant 2 - 轻量、…需求说明 在开发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 classmy-swipediv classswipe-title灯光模式/divvan-swipe :lazy-rendertrue indicator-color#FFBD4Fvan-swipe-item v-for(itemList, keyIndex) in newLightModeList :keykeyIndex classswiper-item-boxdiv v-for(item,index) in itemList :keyindex classswiper-item clickselectMode(item)div classswiper-item-imgimg :srcselectLightValueitem.id?getIconImg(item.selectIcon):getIconImg(item.iconimg :srcselectLightValueitem.id?getIconImg(item.selectIcon):getIconImg(item.icon/divdiv classswiper-item-textp{{ 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;}}}
}
