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