微信小程序下拉菜单

admin · 发表于 2021-1-28 17:13:01

wxml代码：

<view class='menu-po'>
<view class='menu'>
<view class='menu-list'>
<view class='menu-nav' wx:for="{{ msgList }}" wx:for-index="idx" wx:key="key" data-hi="{{ idx }}" bindtap="menuClick">
<text class='menu-text'>{{ item.name }}</text>
<image class='menu-image' src='/images/san1.png'></image>
</view>
</view>
</view>
<view class='menu-if'>
<view class="meun-txt" hidden='{{ meunShow[0].isShows ? true : false }}'>
<view class='menu-text-list'>
<view class='menu-text-list-left over-auto'>
<text wx:for="{{ areaLise }}" wx:key="name" class='meun-city-txt' bindtap="rowClick" data-hi="{{ index }}">{{ item.name }}</text>
</view>
<view class='menu-text-list-rig over-auto' hidden='{{ rigShow ? true : fasle }}'>
<view class='menu-city' hidden='{{ rowShow[0].isShows ? true : fasle }}'>
<text wx:for="{{ rowLise.row_weiyang.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
</view>
<view class='menu-city' hidden='{{ rowShow[1].isShows ? true : fasle }}'>
<text wx:for="{{ rowLise.row_beilin.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
</view>
<view class='menu-city' hidden='{{ rowShow[2].isShows ? true : fasle }}'>
<text wx:for="{{ rowLise.row_xincheng.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
</view>
<view class='menu-city' hidden='{{ rowShow[3].isShows ? true : fasle }}'>
<text wx:for="{{ rowLise.row_yanta.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
</view>
<view class='menu-city' hidden='{{ rowShow[4].isShows ? true : fasle }}'>
<text wx:for="{{ rowLise.row_gaoxin.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
</view>
<view class='menu-city' hidden='{{ rowShow[5].isShows ? true : fasle }}'>
<text wx:for="{{ rowLise.row_baqiao.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
</view>
<view class='menu-city' hidden='{{ rowShow[6].isShows ? true : fasle }}'>
<text wx:for="{{ rowLise.row_changan.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
</view>
</view>
</view>
</view>
<view class="meun-txt over-auto" hidden='{{ meunShow[1].isShows ? true : false }}'>
<text wx:for="{{ price }}" wx:key="id" class='meun-city-txt meun-city-txt-price'>{{ item.name }}</text>
</view>
<view class="meun-txt over-auto" hidden='{{ meunShow[2].isShows ? true : false }}'>
<text class='meun-city-txt meun-city-txt-price' wx:for="{{ roomModel }}" wx:key="id">{{ item.name }}</text>
</view>
<view class="meun-txt" hidden='{{ meunShow[3].isShows ? true : false }}'>
<text>更多</text>
</view>
</view>
</view>

复制代码

wxss代码：

/* 下拉菜单 */
/* 下拉菜单导航 */
.menu-po{
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.menu{
background-color: #fff;
border-bottom: 1rpx solid #e9e9e9;
}
.menu-list{
display: flex;
justify-content: space-between;
height: 90rpx;
}
.menu-nav{
width: 25%;
display: flex;
align-items: center;
justify-content: center;
}
.menu-nav image{
width: 32rpx;
height: 32rpx;
}
.menu-nav text{
color: #696969;
font-size: 14px;
}
.menu-if{
background-color: #ffffff;
box-sizing: border-box;
position: absolute;
top: 92rpx;
left: 0;
z-index: 9;
width: 100%;
}
.meun-txt{
height: auto;
color: #696969;
}
.menu-text-list{
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.menu-text-list-left{
width: 100%;
background-color: #fff;
box-sizing: border-box;
padding-left: 35rpx;
}
/* text样式 */
.meun-city-txt{
display: block;
border-bottom: 1rpx solid #e9e9e9;
width: 100%;
padding: 25rpx 0;
font-size: 14px;
}
.meun-city-txt-price{
display: flex;
justify-content:center;
}
.menu-text-list-rig{
width: 50%;
position: absolute;
top: 0;
right: 0;
background-color: #f9f9f9;
z-index: 10;
box-sizing: border-box;
padding-left: 35rpx;
}
/* over/auto */
.over-auto{
height: 550rpx;
overflow: auto;
}
page{
background-color: #5FB878;
}

复制代码

js代码：

Page({
/* 页面的初始数据*/
data: {
// 获取设备高度
appHeight: '',
// 筛选导航栏数据
msgList: [
{ key: 1, name: '区域'},
{ key: 2, name: '售价'},
{ key: 3, name: '房型'},
{ key: 4, name: '更多'}
],
// 判断导航栏列表是否显示
meunShow: [
{ isShows: true },
{ isShows: true },
{ isShows: true },
{ isShows: true }
],
// 区域数据
// 西安市区
areaLise: [
{ id: 0, name: '不限' },
{ id: 0, name: '未央' },
{ id: 1, name: '碑林' },
{ id: 2, name: '新城' },
{ id: 3, name: '雁塔' },
{ id: 4, name: '高新' },
{ id: 5, name: '灞桥' },
{ id: 6, name: '长安' }
],
// 市区街道
rowLise: {
row_weiyang: { id: 0, name: ['未央1路', '未央2路', '未央3路', '未央4路', '未央5路', '未央6路', '未央7路', '未央8路'] },
row_beilin: { id: 1, name: ['碑林1路', '碑林2路', '碑林3路', '碑林4路', '碑林5路', '碑林6路', '碑林7路', '碑林8路'] },
row_xincheng: { id: 2, name: ['新城1路', '新城2路', '新城3路', '新城4路', '新城5路', '新城6路', '新城7路', '新城8路'] },
row_yanta: { id: 3, name: ['雁塔1路', '雁塔2路', '雁塔3路', '雁塔4路', '雁塔5路', '雁塔6路', '雁塔7路', '雁塔8路'] },
row_gaoxin: { id: 4, name: ['高新1路', '高新2路', '高新3路', '高新4路', '高新5路', '高新6路', '高新7路', '高新8路'] },
row_baqiao: { id: 5, name: ['灞桥1路', '灞桥2路', '灞桥3路', '灞桥4路', '灞桥5路', '灞桥6路', '灞桥7路', '灞桥8路'] },
row_changan: { id: 5, name: ['长安1路', '长安2路', '长安3路', '长安4路', '长安5路', '长安6路', '长安7路', '长安8路'] }
},
// 区域模块市区街道隐藏/显示
rowShow: [
{ isShows: true },
{ isShows: true },
{ isShows: true },
{ isShows: true },
{ isShows: true },
{ isShows: true },
{ isShows: true},
{ isShows: true},
],
// 区域右侧是否显示
rigShow: true,
// 售价
price: [
{ id: 0, name: '不限' },
{ id: 1, name: '1万以下' },
{ id: 2, name: '1 - 1.5万' },
{ id: 3, name: '1.5 - 2.0万' },
{ id: 4, name: '2.0 - 2.5万' },
{ id: 5, name: '2.5 - 3.0万' },
{ id: 6, name: '3.0 - 3.5万' },
{ id: 7, name: '3.5 - 4.0万' },
{ id: 8, name: '4万以上' },
],
// 房间型号
roomModel: [
{ id: 0, name: '不限' },
{ id: 1, name: '一室' },
{ id: 2, name: '二室' },
{ id: 3, name: '三室' },
{ id: 4, name: '四室' },
{ id: 5, name: '五室以上' }
]
},
onLoad: function (options) {
// 获取设备高度
var res = wx.getSystemInfoSync();
this.setData({
appHeight: res.windowHeight
});
console.log(this.data.appHeight)
},
// 筛选导航栏事件
menuClick: function(e){
// 获取通过wxml data-hi="{{ idx }}" 传过来的索引
var menuNum = e.currentTarget.dataset.hi;
// 拼接，使我们可以获取到menuShow里面每一个isSHows
var menuSrc = "meunShow[" + menuNum + "].isShows";
// 循环data中设置的meunShow
for (var n = 0; n < this.data.meunShow.length; n++){
// 拼接，使我们可以获取到menuShow里面每一个isSHows
var menuSrcs = "meunShow[" + n + "].isShows";
// 解决重复点击不能隐藏的问题
if (n != menuNum){
// 初始化，每次点击时先全部隐藏，但是重复点击不会隐藏
this.setData({
[menuSrcs]: true
});
};
};
// 给当前点击的去反data中设置的meunShow，使之显示，只写此处只会显示不能隐藏
this.setData({
[menuSrc]: !this.data.meunShow[e.currentTarget.dataset.hi].isShows
});
},
// 区域列表事件
rowClick: function(e){
// 限制第一个 '不限' 不能点击
if (e.currentTarget.dataset.hi != 0){
// 获取wxml data-hi="{{ index }}" 传过来的索引
var rowNum = e.currentTarget.dataset.hi;
// 同筛选导航栏事件，因第一个为不限不可点击，所以减一
var rowSrc = "rowShow[" + ( rowNum - 1 ) + "].isShows";
// 隐藏所有的三级菜单
for (var m = 0; m < this.data.rowShow.length; m++){
var rowSrcs = "rowShow[" + m + "].isShows";
this.setData({
[rowSrcs]: true
});
};
// 同上
this.setData({
rigShow: false,
[rowSrc]: !this.data.rowShow[e.currentTarget.dataset.hi].isShows
});
};
},
});

复制代码