微信小程序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;
}