双重for循环数据按顺序一个一个的显示(记录)

//html
<view v-for="(item, boxIndex) in pageData" :key="boxIndex">
	<view v-for="(child, cIndex) in item.data" :key="boxIndex" :class="type==1?'box_n':'box_s'"
		v-if="showItem[level] && showItem[level][boxIndex]">
		<text>{{child.name}}</text>
	</view>
</view>

//js
//data
pageData:[
	{
		level:1,
		data:[
			{
				id:0,
				name:'测试0'
			},
			{
				id:1,
				name:'测试1'
			},
			{
				id:2,
				name:'测试2'
			},
			{
				id:3,
				name:'测试3'
			}
		]
	},
	{
		level:2,
		data:[
			{
				id:0,
				name:'测试0'
			},
			{
				id:1,
				name:'测试1'
			},{
				id:2,
				name:'测试2'
			},
			{
				id:3,
				name:'测试3'
			}
		]
	},
],
showItem:[
	[false,false,false,false],
	[false,false,false,false]
]

//function
initLoadDataWithDelay() {
	let rowIndex = 0;
	let itemIndex = 0;
	let interval = setInterval(() => {
		if (rowIndex < this.pageData.length) {
			this.$set(this.showItem[rowIndex], itemIndex, true);
			itemIndex++;
			if (itemIndex >= this.pageData[rowIndex].data.length) {
				itemIndex = 0;
				rowIndex++;
			}
		} else {
			clearInterval(interval);
		}
	}, 230);
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值