一般来说的话，总有点需要下拉并且能够搜索选择的需求。首先wxml
!-- 下拉菜单 -- view class='menu-po' !-- 请选择 -- view class='menu' view class='menu-list' view class="{{item.key==menuNums&&openPicker?'menu-nav2':'menu-nav'}}" wx:for="{{ msgList }}" wx:for-index="idx" data-key='{{item.key}}' wx:key="key" data-hi="{{ idx }}" data-name='{{item.name}}' bindtap="menuClick" text class='menu-text'{{ item.name }}/text image class='menu-image' src='/pages/img/pull.png'/image /view /view /view !-- 列表栏 -- view class='menu-if' !-- 区域 -- view class="meun-txt over-auto" hidden='{{ meunShow[0].isShows ? true : false }}' scroll-view scroll-y="true" style="height: 446rpx" text wx:for="{{ sousuoList }}" data-id="{{item.id}}" class='meun-city-txt meun-city-txt-price' bindtap='souSearch' data-name='{{item.name}}'{{ item.name }}/text /scroll-view /view /view /view其次是wxss
.menu-po { position: relative; left: 0; top: 0; right: 0; bottom: 0; width: 25%; margin-left: 5%; display: inline-block; margin-top: 10px; margin-bottom: 10px;}.menu-list { display: flex; justify-content: space-between;}.menu-nav { display: flex; align-items: center; justify-content: center;}.menu-nav2 { display: flex; align-items: center; justify-content: center;}.menu-nav2 image { width: 24rpx; height: 15rpx;}.menu-nav2 text { font-size: 14px;}.menu-nav image { width: 24rpx; height: 15rpx;}.menu-nav text { color: #696969; font-size: 14px;}.shadow { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; position: absolute; top: 210rpx;}.menu-if { background-color: #fff; box-sizing: border-box; position: absolute; z-index: 9; margin-left: -15px; width: 100%;}.swiper-item { background: #fff; width: 100%; height: 600rpx; display: none; position: absolute; top: 100rpx; z-index: 333333; left: 0; animation: displays 1s;}.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;}最后是js文件
Page({ /** * 页面的初始数据 */ data: { msgList: [{ key: 1, name: '请选择' }], // 判断导航栏列表是否显示 meunShow: [{ isShows: true }], sousuoList: [{ id: 1, name: '新房' }, { id: 2, name: '二手房' }, { id: 3, name: '写字楼' }, { id: 4, name: '商铺' }, { id: 5, name: '出租' }], }, souSearch: function (e) { var that = this; var openPicker = this.data.openPicker; var house_name = e.target.dataset.name; var msgList = that.data.msgList; this.setData({ openPicker: !openPicker, }) for (var i = 0; i msgList.length; i++) { var keys = msgList[i].key; if (keys == 1) { msgList[i].name = house_name; that.setData({ msgList: msgList, house_name: house_name }) } } var menuNum = that.data.menuNum; var meunShow = this.data.meunShow; var menuSrc = "meunShow[" + menuNum + "].isShows"; // console.log('menuNum:' + menuNum); for (var n = 0; n meunShow.length; n++) { // 拼接 ，使我们可以获取到menuShow里面每一个isSHows var menuSrcs = meunShow[n].isShows; // console.log('menuSrcs:' + menuSrcs); // 解决重复点击不能隐藏的问题 if (n != menuNum) { this.setData({ menuSrcs: true }); }; }; // 给当前点击的去反data中设置的meunShow，使之显示， 只写此处只会显示不能隐藏 this.setData({ [menuSrc]: !this.data.meunShow[menuNum].isShows }); }, menuClick: function (e) { // 获取通过wxml data-hi="{{ idx }}" 传过来的索引 var that = this; var menuNum = e.currentTarget.dataset.hi; that.setData({ menuNum: menuNum }) var name = e.currentTarget.dataset.name; if (name == that.data.name) { // console.log('=='); that.setData({ openPicker: !this.data.openPicker, }) } else { // console.log('!='); that.setData({ openPicker: true, }) } that.setData({ name: name }) // console.log(name + ',' + menuNum); // 拼接 ，使我们可以获取到menuShow里面每一个isSHows var menuSrc = "meunShow[" + menuNum + "].isShows"; // console.log('picker:' + this.data.openPicker); this.setData({ needAnimation: true, menuNums: menuNum + 1 }); // 循环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 }); }, })这就是下拉选择框的全部代码了。
