在做项目的时候遇到一个将一维数组转为二维数组的问题。应用到的问题是这样的。我需要做一个轮播的一个页面里嵌套着多个item选择项。……说的苍白无力。图↓
这个时候需要接收一个二维数组,用swiper嵌套在外面,循环遍历里面的数组。这不是重点……问题在于接口里拿到的是一维数组,如何将一维数组转为二维数组嘞……
介里……↓(以uni-app为例)
现在data中定义两个列表,一个用于接收接口拿来的一维数组列表,另一个用于存放转成二位之后的数组列表
data() {
return {
//这个是给接口传递的参数,不是重点
queryInfo: {
name: '',
pageNum: 1,
pageSize: 100
},
// 银行列表,这里这里才是定义的量的数组列表!!!
bankList: [],
newBankList: [],
}
}
先在methods方法中设置获取接口数据的方法
methods:{
// 获取银行列表
async getBank() {
//这里的/api/bankClass接口是我的,你们根据个人情况自己放自己的咯!!this.queryInfo是传递的参数……吧
const res = await this.$http.get('/api/bankClass', this.queryInfo);
//此处判断是否获取数据,如果code不正确,就会toast错误
if (res.code !== 0) {
return uni.showToast({
title: res.msg,
icon: 'none'
});
}
//这里接口的数组列表数据传值给刚定义的一维数组列表
this.bankList = res.data.data;
},
}
接着,在onLoad方法中初始化获取接口数据的方法
onLoad() {
this.getBank();
},
……接下来是重点:将一维数组转化为二维数组
同样在methods方法中写入(注意是异步的!异步的!异步的!)
// 对获取到的银行列表数据进行重新组合
async trimData() {
//调用刚刚的getBank方法,已将bankList赋上了接口的数据
await this.getBank();
//在方法中定义一个空的子数组列表
let childBankList = [];
//这个是在data中定义的列表,此处为了方便,又定义给newBankList
let newBankList = this.newBankList;
//当从接口拿的bankList数组列表有数据时
if (this.bankList.length > 0) {
//就循环遍历该数组列表
this.bankList.forEach((val, index) => {
//将遍历的值追加给子列表
childBankList.push(val);
//此处的12代表一个页面展示多少个小数据。12个数据组成一个数组,
//12个数据的数组外面在包裹一个大数组,便成了二维数组
if ((index + 1) % 12 == 0) {
//这里把追加在子数组里面的12条数据再追加在新的数组里面
newBankList.push(childBankList);
//并将子数组里的12条数据清空,再次循环遍历
childBankList = [];
}
//这里出现一种情况,循环遍历的最后一组数据小于12,那就不会走上一个条件了,
//这里当循环到最后一条数据的时候,他的下标数加一 一定会! 等于 原来的一维数组的长度,
//满足这个条件时,走下面的语句
if (index + 1 == this.bankList.length) {
//这里要判断子数组里是否还存在数据,如果不存在直接跳出循环
if (childBankList.length > 0) {
//当还存在数据的时候,将剩余的最后几个不足12条数组数据全部追加给newBankList
newBankList.push(childBankList);
}
}
});
}
},
这样newBankList里面存放的就是二位数组,bankList存放的是一维数组列表
最后给你们看看我是怎么实现上图的效果的,利用了swiper轮播和uview的宫格布局
<!-- 银行列表 -->
<view class="pt-2 px-2">
<swiper :style="'height:' + scrollswiper + 'px;'" indicator-dots indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#FFFFFF">
<swiper-item v-for="(item, index) in newBankList" :key="index">
<u-grid :col="3" :border="false">
<u-grid-item v-for="(item1, index1) in item" :key="index1" :customStyle="customStyle(index1)">
<!-- <u-avatar :src="item1.iconUrl"></u-avatar> -->
<view class="px-5 rounded-10" :style="myColor(index1)" @click="chooseBank(index, index1)">
<view :style="'height:' + scrollItemH + 'px'" class="d-flex flex-column j-center a-center">
<u-image :src="item1.iconUrl" width="120" height="120" mode="scaleToFill"></u-image>
<view class="text-white">
<text>{{ item1.name }}</text>
</view>
</view>
</view>
</u-grid-item>
</u-grid>
</swiper-item>
</swiper>
</view>
😊😊😊😊😊😊😊😊😊😊
★,°:.☆( ̄▽ ̄)/$:.°★ 。