小程序自定义下拉框

1.    下拉框显示效果
 
2.    wxml页面定义
<view class="condition">
    <view catchtap="select_item" class="item">
      商品类别
    </view>
    <view class='showImage'>
      <image src="../../images/triangle.png" />
    </view>
    <view class="item_list{{!select_type?' item_list_hide':' item_list_show'}}">
      <view wx:for="{{productTypeList}}" wx:key="{{index}}" catchtap="selectProductType" data-index="{{index}}" class="list">
        {{item.name}}
      </view>
    </view>
  </view>
3.    样式
首先在condition样式里把定位设置为相对定位，如此一来在这个层里面的元素都是相对定位。然后showImage是绝对定位，表示它在condition内部它的位置是绝对的
.condition {
   display: flex;
   position: relative;
   margin-top:10rpx;
 }

 .item_list{
  margin-top: 2rpx;
  position: absolute;
  top: 80rpx;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 100;
  font-size: 24rpx;
}
.item_list_show{
  top: 35px;
  animation: slide 200ms;
}
.item_list_hide{
  display: none !important;
}
.showImage{
  position: absolute;
  right: 250rpx;
  top: 18rpx;
}
.showImage image{
  width: 20rpx;
  height: 20rpx;
}
4.    js定义
页面定义的data-index可以用来获取列表下标
selectProductType: function (e) {
    var that = this;
    var index = e.currentTarget.dataset.index;
    that.setData({
      categoryId: that.data.productTypeList[index].value,
      select_type: false,
    })
  },