uniapp 笔记-请求和渲染页面 循环三级

uniapp 笔记-请求和渲染页面 循环三级

1、js部分

    export default {
    onLoad() {
		this.getList();//执行方法执行到页面上
	},
	data() {
		return {
			list: [],//创建一个数组
		}
	},
	methods: {
		getList() {
			uni.request({
				url: 'http://127.0.0.1/tp5.0/public/?s=index/index/get',//后台接口
				method: 'GET',
				responseType: 'json',
				// header: {'content-type': 'application/json'},
				data: {
					id: 1
				},
				success: (res) => {
					this.list = res.data;//给list赋值
				}
			});
		}
	}
	}

2、html部分

<template>
<view class="uni-container">
	<view class="uni-panel" v-for="(item, index) in list" :key="item.id">//第一级循环输出
		<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index)">
			<text class="uni-panel-text">{{item.name}}</text>
			<text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.pages ? '&#xe581;' : '&#xe470;'}}</text>
		</view>
		<view class="uni-panel-c" v-if="item.open">
			<view  v-for="(item2,key) in item.child" :key="key">//第二级循环输出
				<view class="uni-navigate-item" @click="goDetailPage(key)">
					<text class="uni-navigate-text">{{item2.name ? item2.name : item2}}</text>
					<text class="uni-navigate-icon uni-icon">&#xe470;</text>
				</view>
				<view class="uni-navigate-item" v-for="(item3,key) in item2.child" :key="key">//第三级循环输出
					<text style="padding-left:2rem;">{{item3.name ? item3.name : item3}}</text>
				</view>
			</view>
		</view>
	</view>
</view></template>

3、后端数据结构

4、页面效果

隐藏显示三级联动请看下篇