uniapp 自定义菜单页面 顶部侧边菜单效果

uniapp 自定义菜单栏展示

最近需要实现一个多维数组展示的菜单效果，找来找去没有找到合适的插件，只能手写一个了，效果如下：

代码如下，做个参考把，里面的数据也是我mock的假数据，可以参考下思路哈

<template>
	<view class="chioce">
		<!-- 顶部 -->
		<scroll-view class="top" scroll-x="true">
			<view class="top-list"
				 style="display: flex;width:2000rpx;height:76rpx; align-items:center;padding: 0 20rpx;padding-top:20rpx;"
			>
				<view 
				@click="topClickHandle(index, item.id)"
				:class="active === index ? 'active' : ''"
				class="item"
				v-for="(item, index) in list" 
				:key="item.id">
					{{ item.buildName }}
				</view>
			</view>
		</scroll-view>
		<view class="pics">
			<!-- 左侧 -->
			<scroll-view class="left" scroll-y>
				<view 
				@click="leftClickHandle(index, item.districtId)"
				:class="leftActive === index ? 'active' : ''"
				v-for="(item, index) in leftMenuList" 
				:key="item.floorId">
				  {{ item.floorName }}
				</view>
				<view style="height: 104px"></view>
				  
				<view class="fixed-icon" @click="showPop">
					<image class="icon" src="../../../static/icon/white-sort.png" />
				</view>
				  
			</scroll-view>
			<!-- 右侧 -->
			<scroll-view  v-if="refurbish" class="right" scroll-y 
	        :scroll-top="scrollTop" 
			scroll-with-animation>
				<view class="item" v-for="(item, index) in rightContent" :key="index">
					<view class="title">{{ item.districtName }}
						<image class="icon" src="../../../static/icon/sort.png" />
					</view>
					<!--  -->
					<view class="room-list" >
						<view 
						class="room-item" 
						@click="rightClickHandle(index,ind)"
						:class="rightActiveLabel === obj.roomName ? 'right-active' : ''"
						v-for="(obj, ind) in item.roomList" 
						:key="ind">{{ obj.roomName }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 弹出侧边栏 -->
		<uni-drawer ref="showRight" mode="right" :width="320">
			<view class="list">
				<view class="item" v-for="(item,index) in drawerList" :key="index">{{item.buildName}}</view>
			</view>
		</uni-drawer>
		<!-- 操作弹框 -->
		<u-action-sheet :actions="popType" title="选择排序" @select="selectClick" :closeOnClickOverlay="false" @close="closePop" cancelText="取消" round="20" :show="popShow"></u-action-sheet>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				popShow: false,
				popType: [
					{
						name: '楼排序',
						type: 1,
					},
					{
						name: '楼层排序',
						type: 2
					}
				],
				// 顶部菜单
				list: [],
				//左侧菜单
				leftMenuList: [],
				//顶部选择的状态
				active: 0,
				activeLabel:'',
				// 左侧选择
				leftActive: 0,
				leftActiveLabel: '',
				// 右侧数据
				rightContent: [],
				// 右侧选中数据
				rightActive: 0,
				rightActiveLabel: '',
				districtNmame: '',
				//接口返回数据
				cates:[],
				scrollTop:0,
                refurbish:true, //刷新数据
				drawerList:[]
			}
		},
		onLoad () {	
			this.getPicsCate()
		},
		methods: {
            //获取数据
			getPicsCate () {
				this.$http.get('http://localhost:8080/treeList').then(res => {
					this.list = res.list//顶部的数组
					this.leftMenuList = this.list[0].floorList//左侧的数组
					this.rightContent = this.list[this.active].floorList[0].districtList//右侧的数组
				})
			},
            //顶部菜单点击事件
			topClickHandle (index) {
				this.active = index
				this.activeLabel = this.list[index].buildName
				this.leftMenuList = this.list[index].floorList
				this.rightContent = this.list[this.active].floorList[0].districtList
				this.leftActive = 0
				this.leftActiveLabel = this.leftMenuList[0].buildName
				this.scrollTop = 0
                this.refurbish = false
				setTimeout(()=>{
					this.refurbish = true
				},1)
			},
            //左侧菜单点击事件
			leftClickHandle(index, districtId) {
				this.leftActive = index
				this.leftActiveLabel = this.leftMenuList[index].districtName
				this.rightContent = this.list[this.active].floorList[index].districtList
				this.scrollTop = 0
			},
			// 右侧菜单
			rightClickHandle(index,ind) {
				this.rightActive = index
				this.rightActiveLabel = this.rightContent[index].roomList[ind].roomName
				this.districtNmame = this.rightContent[index].districtNmame
			},
			// 
			selectClick(obj){
				if(obj.type==1){
					this.drawerList = this.list
				}
				this.$refs.showRight.open()
				// console.log(index)
			},
			// 展示弹框
			showPop() {
				this.popShow = true
			},
			// 关闭弹框
			closePop() {
				this.popShow = false
				this.$refs.showRight.close()
			},
            //跳转对应的id
            handleDetalis(url){
                  uni.navigateTo({
					url
				})  
            },
		}
	}
</script>
 
<style lang="scss">
scroll-view ::-webkit-scrollbar {  
	display: none !important;  
	width: 0 !important;  
	height: 0 !important;  
	-webkit-appearance: none;  
	background: transparent;  
}
page{
	overflow-y: hidden;
	height: 100%;
}
.top{
	color: #fff;
	width: 100%;
	background-color: #3c9cff;
	// background-color: #fff;
	.item{
		flex: 1;
		text-align: center;
	    padding-bottom: 12px;
	}
	.active{
		font-weight: 600;
		border-bottom: 4px solid #fff;
		padding-bottom: 10px;
		border-radius: 4px;
	}
}

.chioce{
	height: 100%;
}
.pics{
	display: flex;
		height: 100%;
	.left{
		margin-top: 5px;
		background: #3c9cff;
		view:first-child{
			margin-top: 0rpx !important;
		}
		width: 200rpx;
		height: 100%;
		// position: relative;
		view{
			padding-top: 10rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			text-align: center;
			font-size: 24rpx;
			border-bottom: 1px solid #fff;
		}
		.active{
			background:#F8F8F8;
			color: #000;
			font-weight: bold;
		}
		.fixed-icon{
			position: fixed;
			bottom: 0;
			left: 0;
			background: #3c9cff;
			/* width: 100%; */
			width: 100px;
			.icon{
				width: 20px;
				height: 20px;
			}
		}
	}
	.right{
		height: 100%;
		width: 520rpx;
		margin: 10rpx auto;
		.title{
			// width: 100%;
			background: #e0e0e0;
			padding: 10px;
			color: #666;
			margin-bottom: 8px;
			display: flex;
			justify-content: space-between;
			.icon{
				width: 20px;
				height: 20px;
			}
		}
		.room-list{
			display: flex;
		    flex-wrap: wrap;
		}
		.room-item{
			padding: 8px;
    		margin-bottom: 8px;
		}
		.right-active{
			background: #e0e0e0;
			color: #666;
		}
		.item{
			margin-bottom: 20rpx;
			width: 100%;
			> text {
				font-size: 20rpx;
				font-weight: bold;
			}
			.item-phone{
				margin-top: 20rpx;
				background-color: #F8F8F8;
				border-radius: 8rpx;
				padding: 10rpx;
				display: flex;
				align-items: center;
				view:first-child{
					image{
						width: 120rpx;
						height: 100rpx;
					}
				}
				.phone-r{
					margin-left: 15rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					view{
						font-size: 20rpx;
					}
					view:last-child{
						margin-top: 10rpx;
					}
				}
			}
		}
		.item:last-child{
			padding-bottom: 30rpx;
		}
	}
}
</style>

由于只是demo，所以可能效果 不是特别好，仅仅是想给大家提供个思路哈，如果有更好的写法可以一起探讨~