微信小程序select下拉框实现效果

<view class='list-msg'> <view class='list-msg1'>  <text>商品金额</text>  <text>￥99.00</text> </view><!--下拉框 --> <view class='list-msg2' bindtap='bindShowMsg'>  <text>{{tihuoWay}}</text>  <image style='height:20rpx;width:20rpx;' src='/images/down.png'></image> </view> <view class='list-msg1'>  <text>运费</text>  <text></text>免邮</view> <view class='list-msg1'>  <text>实际付款</text>  <text style='color:red'>￥99.00</text> </view><!-- 下拉需要显示的列表 --> <view class="select_box" wx:if="{{select}}">  <view class="select_one" bindtap="mySelect" data-name="重庆分店">重庆分店</view>  <view class="select_one" bindtap="mySelect" data-name="东莞南城分店">东莞南城分店</view>  <view class="select_one" bindtap="mySelect" data-name="东莞总店">东莞总店</view> </view></view>

Page({  /**  * 页面的初始数据  */ data: {  select: false,  tihuoWay: '门店自提' },  /**  * 生命周期函数--监听页面加载  */ onLoad: function (options) {  }, bindShowMsg() {   this.setData({    select:!this.data.select   }) }, mySelect(e) {  var name = e.currentTarget.dataset.name  this.setData({   tihuoWay: name,   select: false  }) },   /**  * 用户点击右上角分享  */ onShareAppMessage: function () {  }})

.list-msg { padding: 0 20rpx; background-color: #fff; position: relative;} .list-msg1 { height: 60rpx; display: flex; align-items: center; justify-content: space-between;} .list-msg .list-msg2 { height: 60rpx; display: flex; align-items: center; justify-content: space-between; border: 1px solid #ccc; padding: 0 10rpx;} .select_box { background-color: #eee; padding: 0 10rpx; width: 93%; position: absolute; top: 130rpx; z-index: 1; overflow: hidden; animation: myfirst 0.5s;} @keyframes myfirst { from {  height: 0rpx; }  to {  height: 210rpx; }} .select_one { height: 60rpx; line-height: 60rpx; border-bottom: 1px solid #ccc;}