微信小程序下拉菜单

有兴趣可以看我的另一篇 vue菜单权限（路由和菜单都由后台返回）https://www.jianshu.com/p/ac1d8d136f45

最近公司有了微信小程序的项目，对于没入坑的我，老板很慷慨的给了我1星期的时间去接触。作为一个房产小程序下拉菜单少不了，开始写的时候没有document很不适应(小小的说一声：还是vue好)，波折虽多但也写出来了，在度娘上感觉这方面的种子很少，虽然写的不好，但也发出来，先上图。不懂得怎么放动图，只会放静态的，功能没问题。

1.png

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
            });
        };
    },
});

写的不好，还需要时间磨合，请不要笑话在下，如果有和我一样才入坑的小宝宝，欢迎大家给我留言，共勉之。