微信小程式select下拉框實現

小程式中是沒有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;
}
 
--------------------- 
作者：子謙呀 
來源：CSDN 
原文：https://blog.csdn.net/qq_41629498/article/details/81586722 
版權宣告：本文為博主原創文章，轉載請附上博文連結！