积累经验：解决一二三级列表展示及二三级列表第一个数据直接放在页面上的问题

最新推荐文章于 2025-08-14 10:24:35 发布

原创最新推荐文章于 2025-08-14 10:24:35 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

文章描述了一种方法来处理和展示一级、二级和三级分类的数据列表。首先，从服务器获取数据并在页面加载时初始化一级列表。通过遍历数据，将二级和三级列表的第一项分别赋值给相应变量，并渲染到页面。用户可以通过点击事件（如`selectSwitch`和`switchThree`）切换不同级别的列表，展示所有相关数据。

解决办法：就是将二级三级数据列表的第一项摘出来，赋值给twoLevelList及threeLevelList变量，并渲染在页面结构上，在通过tab的selectSwitch及switchThree切换，传递每一级别的所有数据再渲染到页面上。

页面一二三级结构展示（代码可复制）

<!-- 一级分类 -->
					<view class="category-list">
						<scroll-view scroll-x="true" @scroll="scroll">
							<view class="category-list-one">
								<view class="cateone-every" v-for="(item,index) in categoryList" :key="index">
									<view class="" @click="selectSwitch(item,index)">
										<view class="img-list">
											<img :src="item.oneIconImgList.img" alt="" class="img">
										</view>
										<view class="title-list">
											{{item.category_name}}
										</view>
									</view>
								</view>

							</view>
						</scroll-view>
					</view>
<!-- 二级及三级分类 -->
					<view class="cate-list" :current="current">
						<!-- 左侧二级列表 -->
						<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper"
							@scrolltolower="lower" @scroll="scroll" :scroll-into-view=" 'cate'+ tempCurrent ">
							
							<!-- 显示 -->
							<view class="cate-list-left">
								<view class="listleft-title" v-for="(item,index) in twoLevelList" :key="index">
									<view class="" @click="switchThree(item,index)">
										{{item.category_name}}
									</view>
								</view>
							</view>

						</scroll-view>
						<!-- 右侧三级列表 -->
						<view class="cate-list-right">
							<!-- 三级列表收起 -->
							<view class="listright-top" v-if="isThreeLevel1" :threeCurrent="threeCurrent">
								<view class="listright">
									<view class="listright-two" :threeCurrent="threeCurrent">
										

										<view class="listright-title" v-for="(item,index) in threeLevelList"
											:key="item.id">
											{{item.category_name}}
										</view>

									</view>
								</view>
								<view class="listright-icon">
									<u-icon name="arrow-down" color="#000000" size="12" top="10" @click="ThreeLevel1">
									</u-icon>
								</view>
							</view>

获取所以列表数据及二三级列表第一项数据

放在生命周期中调用，才能将一级列表直接显示在页面上

js代码段（可复制）

loadData() {
				let that = this;
				this.getCategoryList().then(response => {
					console.log('response.data111:', response.data);

					this.categoryList = response.data;
					this.categoryList.forEach((value, index) => {
						value['oneIconImgList'] = this.oneIconImgList[index]
						// console.log(value.category_name.length);
						if (value.category_name.length > 4) {
							value.category_name = value.category_name.substring(0, 4)
						}

						this.twoLevelList.push(value.sonList);
					})

					// 二级列表第一项
					this.twoLevelList = this.categoryList[0].sonList;
					console.log('this.twoLevelList111111:', this.twoLevelList);

					// 三级列表第一项
					this.threeLevelList = this.twoLevelList[0].sonList;
					console.log('this.threeLevelList222222:', this.threeLevelList);
				})
			},
selectSwitch(item, index) {
				// this.current = id
				this.isSecondList = true;
				this.twoLevelList = item.sonList
			},
switchThree(item, index) {
				// this.threeCurrent = id;
				// this.isCurrentShow = false;
				this.isThirdList = true;
				this.threeLevelList = item.sonList

			},