网上的下拉框组件都不是自己想要的于是就自己写了一个。
wxml

原代码上传竟然显示不出来，wxml只能截图了，然后是js部分
data: {
   dropdownData:[“综合排序”,”行政区”,”商业圈”],//下拉框的数组
   selectData: [‘默认排序’, ‘距离我最近’, ‘距离我最远’],//下拉选项的数组
   sort_hidden: true,//下拉框的显示或隐藏
   zhezhao:true,//遮罩层
   dropup_pic_index: true,//选择下拉框
 },
 // 下拉框确定点击事件
 dropdownTap(e){
   let _this=this;
   _this.setData({
     id: e.currentTarget.dataset.index,//存入下拉框的id
     sort_hidden:false,//下拉框的显示或隐藏
     zhezhao: false,//遮罩层
     upordown: “up”,
   })
 },

// 点击下拉列表
 optionTap(e) {
   let _that=this;
   _that.setData({
     key: e.currentTarget.dataset.index,//存入下拉框的key
     zhezhao: true,//遮罩层的显示或隐藏
     sort_hidden: true,//下拉框的显示或隐藏
     upordown: “down”,
   });

css部分
/* 下拉框 */
.dropdown{
 width: 750rpx;
 height: 80rpx;
 display: flex;
}
.dropdown view{
 width:250rpx;
 height:80rpx;
 font-size:28rpx;
 font-family:PingFangSC-Regular;
 font-weight:400;
 color:rgba(102,102,102,1);
 line-height:80rpx;
 text-align: center;
}
.dropdown view image{
 width:18rpx;
 height:15rpx;
 margin-left: 10rpx;
 margin-top: 30rpx;
}
/* 下拉框一 */
.sort{
 padding-left: 60rpx;
 overflow: hidden;
 width: 640rpx;
 padding-right: 50rpx;
 position: absolute;
 left: 0;
 top: 160rpx;
 z-index: 999;
 background-color: white;
}
.up{
 animation-name:slidown;       /名称/
   animation-duration:0.3s;            /持续时间/
   animation-timing-function:linear;       /播放动画时从头到尾都以相同的速度/
}
.down{
 animation-name:slidup;        /名称/
   animation-duration:0.3s;            /持续时间/
   animation-timing-function:linear;       /播放动画时从头到尾都以相同的速度/
}
.sort view{
 height: 80rpx;
 line-height: 80rpx;
 font-size:28rpx;
 font-family:PingFangSC-Regular;
 font-weight:400;
 color:rgba(51,51,51,1);
}
.dropdown_active{
color:rgba(20,130,240,1);
}
.sort image{
 width:30rpx;
 height:21rpx;
 float: right;
 margin-top: 30rpx;
}
/* css3下拉特效 */
@keyframes slidown{
   from{
       transform:  translateY(-100%);
   }
   to{
       transform:  translateY(0%);
   }
}

@keyframes slidup{
   from{
       transform:  translateY(0%);
   }
   to{
       transform:  translateY(-100%);
   }
}
.show{
 display: block;
}
.hide{
 display: none
}
/* 蒙层消失 */
.zhezhao{
 position: fixed;
 top: 160rpx;
 left: 0;
 z-index: 99;
 width: 100%;
 height: 100%;
 background-color:#000;  
 opacity:0.5;  
}
效果图

 
第一次做小程序，以后再改进。