微信小程序手動實現select下拉框選擇

在小程序中沒有像h5中的下拉 標簽的

picker又滿足部了，那就自己動手寫

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

Page({

    data: {
        select: false,
        tihuoWay: '自提'
    },

    bindShowMsg() {
         this.setData({
             select:!this.data.select
         })
    },
    mySelect(e) {
        var name = e.currentTarget.dataset.name
        this.setData({
            tihuoWay: name,
            select: false
        })
    },

})

 

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