uniapp 城市地铁联动效果实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、前端效果

需要实现的效果如下图所示

二、实际代码

1.数据准备

数据偏多，可以少量数据先实验一下
代码如下（示例）：

subMenuList:[
					{
						name: "位置",
						isCheck:false,
						submenu: [
							{
								name: "上海",
								isCheck:true,
								submenu: [
									{
										name: "黄浦区",
										submenu: [
											{
												name: "打浦桥商圈",
											}, 
											{
												name: "无名商圈",
											},
										]
									}, 
									{
										name: "徐汇区",
									},
								]
							},
							{
								name: "地铁",
								isCheck:false,
								submenu: [
									{
										name: "1号线",
										isCheck:true,
										submenu: [
											{
												name: "人民广场站",
											}, 
											{
												name: "黄坡南路站",
											},
										]
									},
									{
										name: "2号线",
										submenu: []
									},
								]
							},
						],
					}
				],

2.html部分

代码如下（示例）：

<view v-show="showMenu" class="showMenu">
			<view style="display: flex;height: 400px;">
				<view class="first-level-menu">
					<block v-for="(item, index) in firstMenus" :key="index">
						<text :class="[item.isCheck?'back_color2':'back_color1']" @click="radioClick(1,index)">{{item.name}}</text>
					</block>
				</view>
				<view class="second-level-menu">
					<block v-for="(item, index) in secondMenus" :key="idx">
						<text :class="[item.isCheck?'back_color2':'back_color1']" @click="radioClick(2,index)">{{item.name}}</text>
					</block>
				</view>
				<view class="third-level-menu">
					<block v-for="(item, index) in thirdMenus" :key="idx">
						<text :class="[item.isCheck?'back_color2':'back_color1']" @click="radioClick(3,index)">{{item.name}}</text>
					</block>
				</view>
			</view>
			<view style="margin: 8px 15px;">
				<u-row justify="space-between" align="center" gutter="10">
					<u-col span="6" align="center">
						<u-button customStyle="color:#666666;background-color: #FFFFFF;border: 0px;border: 0px solid #FFFFFF;" icon="trash">重置</u-button>
					</u-col>
					<u-col span="6" align="center">
						<button style="color:#FFF;background-color: #FE684F;border: 0px solid #FE684F;">筛选</button>
					</u-col>
				</u-row>
			</view>
		</view>

3.前端样式

代码如下（示例）：

.showMenu {
	    width: 100vw;
	    z-index: 3000;
	    top: 131px;
	    background: #FFFFFF;
	    border-radius: 0;
	    height: 470px;
	    position: absolute;
		overflow-x: hidden;
	}
	.first-level-menu{
		background:#F0F0F0;
		width:80px;
		display:flex;
		flex-direction:column;
		text-align: center;
	}
	.second-level-menu{
		background:#F8F8F8;
		width:118px;
		display:flex;
		flex-direction:column;
		text-align: center;
	}
	.third-level-menu{
		background:#FFFFFF;
		display:flex;
		flex-direction:column;
		text-align: center;
	}
	.back_color1{
		color:#666666;
		padding: 11px 0;
	}
	.back_color2{
		background: #FFFFFF; 
		color: #FE684F;
		padding: 11px 0;
	}

4.js代码

样式已准备好，配合js实现联动效果
js部分代码可根据自身项目业务进行优化
代码如下（示例）：

radioClick(type,value) {
				if(type==1){
					this.firstMenus.map((item, index) => {
						item.isCheck = index === value ? true : false
					})
					this.secondMenus=this.firstMenus[value].submenu
					this.thirdMenus=this.secondMenus[0].submenu
				}else if(type==2){
					this.secondMenus.map((item, index) => {
						item.isCheck = index === value ? true : false
					})
					this.thirdMenus=this.secondMenus[value].submenu
				}
			},

---