微信小程序中下拉框的实现方法及附带代码解析

<view class=&#39;select_box&#39;>

    <view class=&#39;select&#39; catchtap=&#39;selectTap&#39;>

        <text class=&#39;select_text&#39;>{{selectData[index]}}</text>

        <image class=&#39;select_img {{show&&"select_img_rotate"}}&#39; src=&#39;/image/gobottom.png&#39;></image>        

    </view>

    <view class=&#39;option_box&#39; style=&#39;height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;&#39;>

        <text class=&#39;option&#39; style=&#39;{{index==selectData.length-1&&"border:0;"}}&#39; wx:for=&#39;{{selectData}}&#39; wx:key=&#39;this&#39; data-index=&#39;{{index}}&#39; catchtap=&#39;optionTap&#39;>{{item}}</text>

    </view>

</view>

<!--

  show&&"select_img_rotate"-----给显示框右边的下拉箭头添加动画

  height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;-----给改变下拉框高度，实现下拉框的显示隐藏，每个下拉选项的高度为60，下拉框的最大高度这里设置的是300，所以这里写成当数据长度大于5时，下拉框高度为300，反之下拉框高度为数据长度乘以60

  index==selectData.length-1&&"border:0;"-----取消下拉选项的最后一个的下边框

  -->

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;

}

Page({

  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) {

  }

})