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})},
})