微信小程序——实现下拉框

最新推荐文章于 2024-08-06 09:03:34 发布

陈卿诺语

最新推荐文章于 2024-08-06 09:03:34 发布

阅读量5.8k

点赞数 5

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/code_nutter/article/details/124112034

版权

微信小程序专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.wxml

<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=''></image> -->
    </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 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 class="select_one" bindtap="mySelect" data-name="河南分店">河南分店</view>
    </view> 
</view>

2.js

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
        })
        console.log(name)
    },

3.wxss

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