微信小程序下拉菜单

admin

wxml代码：

1. <!-- 下拉菜单 -->
   
2.     <view class='menu-po'>
   
3.         <!-- 导航栏 -->
   
4.         <view class='menu'>
   
5.             <view class='menu-list'>
   
6.                 <view class='menu-nav' wx:for="{{ msgList }}" wx:for-index="idx" wx:key="key" data-hi="{{ idx }}"            bindtap="menuClick">
   
7.                     <text class='menu-text'>{{ item.name }}</text>
   
8.                     <image class='menu-image' src='/images/san1.png'></image>
   
9.                 </view>
   
10.             </view>
    
11.         </view>
    
12.         <!-- 列表栏 -->
    
13.         <view class='menu-if'>
    
14.             <view class="meun-txt" hidden='{{ meunShow[0].isShows ? true : false }}'>
    
15.                 <view class='menu-text-list'>
    
16.                     <view class='menu-text-list-left over-auto'>
    
17.                         <text wx:for="{{ areaLise }}" wx:key="name" class='meun-city-txt' bindtap="rowClick"  data-hi="{{ index }}">{{ item.name }}</text>
    
18.                     </view>
    
19.                     <view class='menu-text-list-rig over-auto' hidden='{{ rigShow ? true : fasle }}'>
    
20.                         <view class='menu-city' hidden='{{ rowShow[0].isShows ? true : fasle }}'>
    
21.                             <text wx:for="{{ rowLise.row_weiyang.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
    
22.                         </view>
    
23.                         <view class='menu-city' hidden='{{ rowShow[1].isShows ? true : fasle }}'>
    
24.                             <text wx:for="{{ rowLise.row_beilin.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
    
25.                         </view>
    
26.                         <view class='menu-city' hidden='{{ rowShow[2].isShows ? true : fasle }}'>
    
27.                             <text wx:for="{{ rowLise.row_xincheng.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
    
28.                         </view>
    
29.                         <view class='menu-city' hidden='{{ rowShow[3].isShows ? true : fasle }}'>
    
30.                             <text wx:for="{{ rowLise.row_yanta.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
    
31.                         </view>
    
32.                         <view class='menu-city' hidden='{{ rowShow[4].isShows ? true : fasle }}'>
    
33.                             <text wx:for="{{ rowLise.row_gaoxin.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
    
34.                         </view>
    
35.                         <view class='menu-city' hidden='{{ rowShow[5].isShows ? true : fasle }}'>
    
36.                             <text wx:for="{{ rowLise.row_baqiao.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
    
37.                         </view>
    
38.                         <view class='menu-city' hidden='{{ rowShow[6].isShows ? true : fasle }}'>
    
39.                             <text wx:for="{{ rowLise.row_changan.name }}" wx:key="item" class='meun-city-txt'>{{ item }}</text>
    
40.                         </view>
    
41.                     </view>
    
42.                 </view>
    
43.             </view>
    
44.             <view class="meun-txt over-auto" hidden='{{ meunShow[1].isShows ? true : false }}'>
    
45.                 <text wx:for="{{ price }}" wx:key="id" class='meun-city-txt meun-city-txt-price'>{{ item.name }}</text>
    
46.             </view>
    
47.             <view class="meun-txt over-auto" hidden='{{ meunShow[2].isShows ? true : false }}'>
    
48.                 <text class='meun-city-txt meun-city-txt-price' wx:for="{{ roomModel }}" wx:key="id">{{ item.name }}</text>
    
49.             </view>
    
50.             <view class="meun-txt" hidden='{{ meunShow[3].isShows ? true : false }}'>
    
51.                 <text>更多</text>
    
52.             </view>
    
53.         </view>
    
54. 
    
55.     </view>

复制代码

wxss代码：

1.   /* 下拉菜单 */
   
2. /* 下拉菜单导航 */
   
3. .menu-po{
   
4.     position: relative;
   
5.     left: 0;
   
6.     top: 0;
   
7.     right: 0;
   
8.     bottom: 0;
   
9. }
   
10. .menu{
    
11.     background-color: #fff;
    
12.     border-bottom: 1rpx solid #e9e9e9;
    
13. }
    
14. .menu-list{
    
15.     display: flex;
    
16.     justify-content: space-between;
    
17.     height: 90rpx;
    
18. }
    
19. .menu-nav{
    
20.     width: 25%;
    
21.     display: flex;
    
22.     align-items: center;
    
23.     justify-content: center;
    
24. }
    
25. .menu-nav image{
    
26.     width: 32rpx;
    
27.     height: 32rpx;
    
28. }
    
29. .menu-nav text{
    
30.     color: #696969;
    
31.     font-size: 14px;
    
32. }
    
33. 
    
34. 
    
35. 
    
36. .menu-if{
    
37.     background-color: #ffffff;
    
38.     box-sizing: border-box;
    
39.     position: absolute;
    
40.     top: 92rpx;
    
41.     left: 0;
    
42.     z-index: 9;
    
43.     width: 100%;
    
44. }
    
45. .meun-txt{
    
46.     height: auto;
    
47.     color: #696969;
    
48. }
    
49. .menu-text-list{
    
50.     position: relative;
    
51.     left: 0;
    
52.     top: 0;
    
53.     right: 0;
    
54.     bottom: 0;
    
55. }
    
56. .menu-text-list-left{
    
57.     width: 100%;
    
58.     background-color: #fff;
    
59.     box-sizing: border-box;
    
60.     padding-left: 35rpx;
    
61. }
    
62. /* text样式 */
    
63. .meun-city-txt{
    
64.     display: block;
    
65.     border-bottom: 1rpx solid #e9e9e9;
    
66.     width: 100%;
    
67.     padding: 25rpx 0;
    
68.     font-size: 14px;
    
69. }
    
70. .meun-city-txt-price{
    
71.     display: flex;
    
72.     justify-content:center;
    
73. }
    
74. 
    
75. .menu-text-list-rig{
    
76.     width: 50%;
    
77.     position: absolute;
    
78.     top: 0;
    
79.     right: 0;
    
80.     background-color: #f9f9f9;
    
81.     z-index: 10;
    
82.     box-sizing: border-box;
    
83.     padding-left: 35rpx;
    
84. }
    
85. 
    
86. 
    
87. /* over/auto */
    
88. .over-auto{
    
89.     height: 550rpx;
    
90.     overflow: auto;
    
91. }
    
92. page{
    
93.     background-color: #5FB878;
    
94. }

复制代码

js代码：

1. Page({
   
2.     /* 页面的初始数据*/
   
3.     data: {
   
4.         // 获取设备高度
   
5.         appHeight: '',
   
6. 
   
7.         // 筛选导航栏数据
   
8.         msgList: [
   
9.             { key: 1, name: '区域'},
   
10.             { key: 2, name: '售价'},
    
11.             { key: 3, name: '房型'},
    
12.             { key: 4, name: '更多'}
    
13.         ],
    
14.         // 判断导航栏列表是否显示
    
15.         meunShow: [
    
16.             { isShows: true },
    
17.             { isShows: true },
    
18.             { isShows: true },
    
19.             { isShows: true }
    
20.         ],
    
21. 
    
22.         // 区域数据
    
23.         // 西安市区
    
24.         areaLise: [
    
25.             { id: 0, name: '不限' },
    
26.             { id: 0, name: '未央' },
    
27.             { id: 1, name: '碑林' },
    
28.             { id: 2, name: '新城' },
    
29.             { id: 3, name: '雁塔' },
    
30.             { id: 4, name: '高新' },
    
31.             { id: 5, name: '灞桥' },
    
32.             { id: 6, name: '长安' }
    
33.         ],
    
34.         // 市区街道
    
35.         rowLise: {
    
36.             row_weiyang: { id: 0, name: ['未央1路', '未央2路', '未央3路', '未央4路', '未央5路', '未央6路', '未央7路', '未央8路'] },
    
37.             row_beilin: { id: 1, name: ['碑林1路', '碑林2路', '碑林3路', '碑林4路', '碑林5路', '碑林6路', '碑林7路', '碑林8路'] },
    
38.             row_xincheng: { id: 2, name: ['新城1路', '新城2路', '新城3路', '新城4路', '新城5路', '新城6路', '新城7路', '新城8路'] },
    
39.             row_yanta: { id: 3, name: ['雁塔1路', '雁塔2路', '雁塔3路', '雁塔4路', '雁塔5路', '雁塔6路', '雁塔7路', '雁塔8路'] },
    
40.             row_gaoxin: { id: 4, name: ['高新1路', '高新2路', '高新3路', '高新4路', '高新5路', '高新6路', '高新7路', '高新8路'] },
    
41.             row_baqiao: { id: 5, name: ['灞桥1路', '灞桥2路', '灞桥3路', '灞桥4路', '灞桥5路', '灞桥6路', '灞桥7路', '灞桥8路'] },
    
42.             row_changan: { id: 5, name: ['长安1路', '长安2路', '长安3路', '长安4路', '长安5路', '长安6路', '长安7路', '长安8路'] }
    
43.         },
    
44. 
    
45.         // 区域模块市区街道隐藏/显示
    
46.         rowShow: [
    
47.             { isShows: true },
    
48.             { isShows: true },
    
49.             { isShows: true },
    
50.             { isShows: true },
    
51.             { isShows: true },
    
52.             { isShows: true },
    
53.             { isShows: true},
    
54.             { isShows: true},
    
55.         ],
    
56. 
    
57.         // 区域右侧是否显示
    
58.         rigShow: true,
    
59. 
    
60.         // 售价
    
61.         price: [
    
62.             { id: 0, name: '不限' },
    
63.             { id: 1, name: '1万以下' },
    
64.             { id: 2, name: '1 - 1.5万' },
    
65.             { id: 3, name: '1.5 - 2.0万' },
    
66.             { id: 4, name: '2.0 - 2.5万' },
    
67.             { id: 5, name: '2.5 - 3.0万' },
    
68.             { id: 6, name: '3.0 - 3.5万' },
    
69.             { id: 7, name: '3.5 - 4.0万' },
    
70.             { id: 8, name: '4万以上' },
    
71.         ],
    
72. 
    
73.         // 房间型号
    
74.         roomModel: [
    
75.             { id: 0, name: '不限' },
    
76.             { id: 1, name: '一室' },
    
77.             { id: 2, name: '二室' },
    
78.             { id: 3, name: '三室' },
    
79.             { id: 4, name: '四室' },
    
80.             { id: 5, name: '五室以上' }
    
81.         ]
    
82. 
    
83.     },
    
84.     onLoad: function (options) {
    
85.         // 获取设备高度
    
86.         var res = wx.getSystemInfoSync();
    
87.         this.setData({
    
88.             appHeight: res.windowHeight
    
89.         });
    
90. 
    
91.         console.log(this.data.appHeight)
    
92.     },
    
93. 
    
94.     // 筛选导航栏事件
    
95.     menuClick: function(e){
    
96.         // 获取通过wxml  data-hi="{{ idx }}" 传过来的索引
    
97.         var menuNum = e.currentTarget.dataset.hi;
    
98. 
    
99.         // 拼接 ，使我们可以获取到menuShow里面每一个isSHows
    
100.         var menuSrc = "meunShow[" + menuNum + "].isShows";
     
101. 
     
102.         // 循环data中设置的meunShow
     
103.         for (var n = 0; n < this.data.meunShow.length; n++){
     
104.             // 拼接 ，使我们可以获取到menuShow里面每一个isSHows
     
105.             var menuSrcs = "meunShow[" + n + "].isShows";
     
106.             // 解决重复点击不能隐藏的问题
     
107.             if (n != menuNum){
     
108.                 // 初始化，每次点击时先全部隐藏，但是重复点击不会隐藏
     
109.                 this.setData({
     
110.                     [menuSrcs]: true
     
111.                 });
     
112.             };
     
113.         };
     
114. 
     
115.         // 给当前点击的去反data中设置的meunShow，使之显示， 只写此处只会显示不能隐藏
     
116.         this.setData({
     
117.             [menuSrc]: !this.data.meunShow[e.currentTarget.dataset.hi].isShows
     
118.         });
     
119.     },
     
120. 
     
121.     // 区域列表事件
     
122.     rowClick: function(e){
     
123.         // 限制第一个 '不限' 不能点击
     
124.         if (e.currentTarget.dataset.hi != 0){
     
125.             // 获取wxml  data-hi="{{ index }}" 传过来的索引
     
126.             var rowNum = e.currentTarget.dataset.hi;
     
127.             // 同筛选导航栏事件，因第一个为不限不可点击， 所以减一
     
128.             var rowSrc = "rowShow[" + ( rowNum - 1 ) + "].isShows";
     
129.             // 隐藏所有的三级菜单
     
130.             for (var m = 0; m < this.data.rowShow.length; m++){
     
131.                 var rowSrcs = "rowShow[" + m + "].isShows";
     
132.                 this.setData({
     
133.                     [rowSrcs]: true
     
134.                 });
     
135.             };
     
136.             // 同上
     
137.             this.setData({
     
138.                 rigShow: false,
     
139.                 [rowSrc]: !this.data.rowShow[e.currentTarget.dataset.hi].isShows
     
140.             });
     
141.         };
     
142.     },
     
143. });

复制代码