<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;}