wxml:

<view class='select_box'>     <view class='select' catchtap='selectTap'>         <text class='select_text'>{{selectData[index]}}</text>         <image class='select_img {{show&&"select_img_rotate"}}' src=''></image>              </view>     <view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>         <text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</text>     </view> </view> ---------------------   

wxss:

page{   background: #f3f7f7; } .select_box{   background: #fff;   width: 80%;   margin: 30rpx auto;   position: relative; } .select{   box-sizing: border-box;   width: 100%;   height: 70rpx;   border:1px solid #efefef;   border-radius: 8rpx;   display: flex;   align-items: center;   padding: 0 20rpx; } .select_text{   font-size: 30rpx;   flex: 1; } .select_img{   width: 40rpx;   height: 40rpx;   display: block;   transition:transform 0.3s; } .select_img_rotate{   transform:rotate(180deg);  } .option_box{   position: absolute;   top: 70rpx;   width: 100%;   border:1px solid #efefef;   box-sizing: border-box;   height: 0;   overflow-y: auto;   border-top: 0;   background: #fff;   transition: height 0.3s; } .option{   display: block;   line-height: 40rpx;   font-size: 30rpx;   border-bottom: 1px solid #efefef;   padding: 10rpx; } ---------------------

wxjs:

data: {     show: false,//控制下拉列表的顯示隱藏，false隱藏、true顯示     selectData: ['1', '2', '3', '4', '5', '6'],//下拉列表的資料     index: 0//選擇的下拉列表下標   },   // 點選下拉顯示框   selectTap() {     this.setData({       show: !this.data.show     });   },   // 點選下拉列表   optionTap(e) {     let Index = e.currentTarget.dataset.index;//獲取點選的下拉列表的下標     this.setData({       index: Index,       show: !this.data.show     });   },   onLoad: function (options) {

  } ---------------------