uniapp二级菜单展开列表

最新推荐文章于 2024-07-25 14:23:08 发布

年少轻狂小Baby

最新推荐文章于 2024-07-25 14:23:08 发布

阅读量775

点赞数

文章标签： uni-app javascript

原文链接：https://blog.csdn.net/Erin_jwx/article/details/120626533?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167972989116800217245418%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167972989116800217245418&biz_id=0

版权

uniapp二级菜单展开列表

<template>
	<view class="content">
		<view class="position-group">
			<!-- 一级循环 -->
			<view class="pronames_one" v-for="(item,index) in positionlist" :key="index" :class="item.oneliststare?'oneshow':'onehide'">
				<view class="pronames-one-label" @click="onelist(index)">
					<text>{{item.onename}}</text>
				</view>
				<!-- 二级循环 -->
				<view class="pronames_two" v-for="(item2,index2) in item.positiontwo" :key="index2" :class="item2.twoliststare?'twoshow':'twohide'">
					<view class="pronames-two-label" @click="twolist(index,index2)">
						<text>{{item2.twoname}}</text>
					</view>
				</view>
			</view>
		</view> 
	</view>
</template>

<script>
	
	
		export default {
			data() {
				return {
					positionSele: true,
					positionlist: [{
						id: 0,
						onename: "销售|客服|市场",
						oneliststare: false,
						positiontwo: [{
							twoid: 0,
							twoname: "销售业务",
							twoliststare: false,
						},{
							twoid: 1,
							twoname: "销售管理",
							twoliststare: false,
						}]
					},{
						id: 1,
						onename: "IT|互联网|通信",
						oneliststare: false,
						positiontwo: [{
							twoid: 0,
							twoname: "软件/互联网开发/系统集成",
							twoliststare: false,
						},{
							twoid: 1,
							twoname: "互联网产品/运营管理",
							twoliststare: false,
						}]
					}]
				}
			},
			onLoad() {},
			methods: {
				onelist(index){
					let positionlist = this.positionlist;
					// 展开收起一级列表 start
					if(positionlist[index]['oneliststare'] == false){
						positionlist[index]['oneliststare'] = true;
					}else{
						positionlist[index]['oneliststare'] = false;
					}
					// 展开收起一级列表 end
				},
			}
		}
</script>

<style>
	page {
		background: #fff;
	}
	.position-group {
		width: 100%;
		height: auto;
	}
	/* 一级 */
	.pronames_one {
		width: 100%;
		height: auto;
	}
	.pronames-one-label {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		background: #fff;
		box-sizing: border-box;
		padding: 0px 3%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eaeaea solid;
	}
	.pronames-one-label text {
		font-size: 15px;
		color: #2ebbfe;
	}
	/* 二级 */
	.pronames_two {
		width: 100%;
		height: auto;
		transition: all 0.5s;
	}
	.pronames-two-label {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 3%;
		border-bottom: 1px #eee solid;
	}
	.pronames-two-label text {
		font-size: 15px;
		color: #333;
	}
	/* 三级 */
	.pronames_three {
		width: 100%;
		height: auto;
	}
	.pronames_three-label {
		width: 97%;
		margin-left: 3%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		flex-direction: row;
		border-bottom: 1px #f1f1f1 solid;
		align-items: center;
	}
	.pronames_three-label text {
		width: 90%;
		font-size: 15px;
		color: #868686;
	}
	/* 展开收起效果 start */
	.oneshow{}
	.oneshow .pronames_two{ display: block; }
	.onehide{} 
	.onehide .pronames_two{ display: none; }
	/* 展开收起效果 end */	
	.twoshow{}
	.twoshow .pronames_three{ display: block; }
	.twohide{} 
	.twohide .pronames_three{ display: none; }
</style>