小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉

 这里为了更清楚的显示层级 就把源码直接复制过来了

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

下面是js代码

Page({/*** 页面的初始数据*/data: {select: false,tihuoWay: '门店自提'},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},bindShowMsg() {this.setData({select:!this.data.select})},mySelect(e) {var name = e.currentTarget.dataset.namethis.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;
}