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,所以可能效果 不是特别好,仅仅是想给大家提供个思路哈,如果有更好的写法可以一起探讨~