微信小程序之select下拉框

wxml：

<view class="classify-kuangjia">
  <view class="classify-kuangjia2">
    <view>商品分类:</view>
    <!-- 下拉框 -->
    <view class='classify' bindtap='bindShowMsg'>
      <text>{{grade_name}}</text>
      <image class="classify-tupian" src='/images/classify.png'></image>
      <!-- 下拉需要显示的列表 -->
      <view class="select_box" wx:if="{{select}}">
        <view wx:for="{{grades}}" wx:key="unique">
          <view class="select_one" catchtap="mySelect" data-name="{{item}}">{{item}}</view>
        </view>
      </view>
    </view>
    
  </view>
</view>

wxss：

.classify-kuangjia{
  height: 50rpx;
  background-color: red;
  display: flex;
  justify-content: center;
}
.classify-kuangjia2{
  width: 90%;
  height: 50rpx;
  display: flex;
  justify-content: space-between;
}
.classify{
  padding-left: 20rpx;
  align-items: center;
  justify-content: space-between;
  width: 50%;
  position:relative;
}
.classify-tupian{
  width: 50rpx;
  height: 25rpx;
  position: absolute;
  right: 0rpx;
  top: 15rpx;
}
.select_box{
  width: 100%;
  background-color: cornflowerblue;
  position: absolute;
  right: 0rpx;
  top:50rpx;
  animation: myclassify 1s;
  overflow: hidden;
}
.select_one {
  padding-left: 20rpx;
  width: 100%;
  height: 60rpx;
  position: relatiave;
  line-height: 60rpx;
  border-bottom: 1px solid #ccc;
}
/* 下拉过度效果 */
@keyframes myclassify {
  from {
    height: 0rpx;
  }to {
    height: 210rpx;
  }
}

js：

Page({
  /**
     * 页面的初始数据
     */
  data: {
    DqOpenid: '',
    select: false,
    grade_name: '--请选择--',
    grades: ['猛犸机器人1班', '猛犸机器人2班', '口才1班',]
  },
// 点击下拉框 
  bindShowMsg() {
    this.setData({
      select: !this.data.select
    })
  },
  // 已选下拉框 
  mySelect(e) {
    console.log(e)
    var name = e.currentTarget.dataset.name 
    this.setData({
      grade_name: name,
      select: false
    })

  },
})

素材：

效果图：