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

最新推荐文章于 2024-09-30 15:42:36 发布

sinsolar

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量381

点赞数 8

文章标签：前端 javascript 开发语言 uni-app vue.js

本文链接：https://blog.csdn.net/sinsoled/article/details/134854064

版权

//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);
},