小程序下拉选框

1.wxml中代码  一共三个部分 

     标题

     常态选择框绑定点击函数 bindShowMsg

     下拉选框，在js data中增加需要选择的数据数组用来做循环，绑定下拉函数，设置data-name寻找值，并在css中设置动画下拉样式

    <view class='list-msg1'>
        <text>选择日期</text>
    </view>

<!--下拉框   -->

    <view class='list-msg2'bindtap='bindShowMsg'>
        <text>{{tihuoWay}}</text>
    </view>
<!-- 下拉需要显示的列表 -->
    <view class="select_box"wx:if="{{select}}">

        <view
        wx:for="{{arr}}"
         class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view>
    </view>
</view>

2.wxml中下拉框的样式

.list-msg1{
    background-color: whitesmoke;
    display: inline-block;
    margin-left: 150rpx;
}
.list-msg2{
    background-color: whitesmoke;
    display: inline-block;
   margin-left: 10rpx; 
}
.select_box{
   width: 90rpx;
    margin-left: 300rpx;
    background-color: wheat;
    border: thistle 2rpx solid;
}
.select_one{
    border: thistle 2rpx solid;
}

3.js

    data: {
        select: false,
        tihuoWay: '近两日',
        arr:['两日','一周','一月' ]
    },
//选择函数
 bindShowMsg() {
        this.setData({
          select: !this.data.select
    
        })
    
      },
//下拉选择
      mySelect(e) {
        var name = e.currentTarget.dataset.name
    
        this.setData({
          tihuoWay: name,
    
          select: false
    
        })
    
      },

 参考微信小程序|下拉菜单_算法与编程之美-CSDN博客后改动