小程序中是沒有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.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;}

以上所述是小編給大家介紹的微信小程序select下拉框實現效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！