下拉筛选组件

这样一个需求，小程序做一个下拉筛选，小程序可以从底部弹出，从上面弹出只能自己写，为了方便，故写成了一个组件。

做出来就是这个样子，如图：

附上代码，仅供参考，不喜勿喷哦。

<view class="detail">
  <view class="screening-wrap">
    <view class="screening">
      <view class="screening-button {{showScreening=='block' ? 'on' : ''}}" bindtap="screenClick">筛选
        <i></i>
      </view>
    </view>

    <swiper class="swiper-item" style='display:{{showScreening}}'>
      <swiper-item>
        <view class="time-screening">
          <view class="time">
            <view class="start">
              <picker mode="date" value="{{startTime}}" bindchange="startTimeClick">
                <view class="picker">
                  {{startTime||'开始时间'}}
                </view>
              </picker>
            </view>
            <p>-</p>
            <view class="end">
              <picker mode="date" value="{{endTime}}" bindchange="endTimeClick">
                <view class="picker">
                  {{endTime||'结束时间'}}
                </view>
              </picker>
            </view>
          </view>
        </view>
        <view class="phone-screening">
          <view class="phone">
            <input type="number" value="{{content}}" bindinput="contentClick" placeholder="请输入手机号查询"></input>
          </view>
        </view>
        <view class="options-screening">
          <block wx:for="{{optionsList}}" wx:for-item="options" wx:key="key">
            <view class="{{options.type== activeType?'choose':'no-choose'}}" data-type="{{options.type}}" bindtap="optionsClick">
              <text class="choose-text">{{options.name}}</text>
            </view>
          </block>
        </view>
    
        <view class="bottom-button">
          <button class="clean" bindtap="clean">清除</button>
          <button class="confirm" bindtap="confirm">确定</button>
        </view>
      </swiper-item>
    </swiper>
  </view>

  <view class="screening-bg" bindtap="hide" style='display:{{showScreening}}'></view>
</view>

.detail {
  position: relative;
}

.screening-wrap {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
}

.screening {
  margin-bottom: 20rpx;
  padding: 0 30rpx;
  text-align: center;
  line-height: 88rpx;
  border-bottom: 1rpx solid #e8e8e8;
}

.screening-button {
  position: relative;
  font-size: 28rpx;
  display: inline-block;
  width: 25%;
  color: #000;
}

.screening-button i {
  position: absolute;
  bottom: 30%;
  right: 14%;
  width: 0px;
  height: 0px;
  border: 5px solid #4e4e4e;
  border-top-color: #4e4e4e;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

.on {
  color: #26a2ff;
}

.on i {
  bottom: 45%;
  border: 5px solid #26a2ff;
  border-top-color: transparent;
  border-bottom-color: #26a2ff;
  border-left-color: transparent;
  border-right-color: transparent;
}

.swiper-item {
  background: #fff;
  width: 100%;
  height: 700rpx;
  display: none;
  left: 0;
  animation: displays 0.5s;
}

@keyframes displays {
  from {
    height: 0px;
  }

  to {
    height: 700rpx;
  }
}

.screening-bg {
  position: fixed;
  top: 20rpx;
  left: 0;
  display: none;
  animation: 1s;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 999;
  opacity: 0.70;
}

.time-screening {
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  height: 80rpx;
}

.time-screening .time {
  margin: 0 auto;
  overflow: hidden;
}

.time .start, .time .end {
  width: 316rpx;
  float: left;
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border: 1rpx solid #e8e8e8;
  color: #666;
}

.time p {
  float: left;
  margin: 0 20rpx;
  line-height: 80rpx;
  color: #666;
}

.phone-screening {
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  height: 80rpx;
}

.phone-screening .phone {
  margin: 0 auto;
  overflow: hidden;
}

.phone input {
  height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  border: 1rpx solid #e8e8e8;
  color: #666;
}

.options-screening {
  padding: 0 20rpx;
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.options-screening .choose, .options-screening .no-choose {
  border-radius: 5rpx;
  font-size: 28rpx;
  width: 152rpx;
  margin: 13rpx;
}

.options-screening .choose {
  color: #26a2ff;
  border: 1rpx solid #26a2ff;
}

.options-screening .no-choose {
  color: #999;
  border: 1rpx solid #e8e8e8;
}

.options-screening .choose-text {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  float: left;
}

.bottom-button {
  padding: 0 30rpx;
  margin: 30rpx auto 0;
  height: 40px;
}

.bottom-button button::after {
  border: none;
}

.bottom-button .clean {
  float: left;
  width: 315rpx;
  height: 80rpx;
  color: #333;
  font-size: 30rpx;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 10px 25px 0px rgba(211, 211, 211, 0.45);
  border-radius: 40rpx;
}

.bottom-button .confirm {
  float: right;
  width: 315rpx;
  height: 80rpx;
  color: #fff;
  font-size: 30rpx;
  text-align: center;
  background-color: #26a2ff;
  box-shadow: 0px 10px 25px 0px rgba(38, 162, 255, 0.45);
  border-radius: 40rpx;
}

Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    activeType: '', //默认
    // 选项类型
    optionsList: [{
      name: '所有类型',
      type: ''
    }, {
      name: '待支付',
      type: 'ORDER_UNPAY'
    }, {
      name: '已关闭',
      type: 'ORDER_CLOSED'
    }, {
      name: '已取消',
      type: 'ORDER_UNPAY_CANCELLED'
    }, {
      name: '待核销',
      type: 'ORDER_WAITING_VERIFY'
    }, {
      name: '待付尾款',
      type: 'ORDER_WAITING_PAY_OFFLINE'
    }, {
      name: '已核销',
      type: 'ORDER_SUCCESS'
    }, {
      name: '退款中',
      type: 'ORDER_REFUNDING'
    }, {
      name: '已退款',
      type: 'ORDER_PAYED_CANCELLED'
    }, {
      name: '已过期',
      type: 'TYP_EXPIRED'
    }],
    startTime: "",
    endTime: "",
    content: ""
  },


  /**
   * 组件的方法列表
   */
  methods: {
    screenClick: function(e) {
      this.setData({
        showScreening: this.data.showScreening == "none" ? "block" : "none"
      })
    },

    optionsClick: function(e) {
      var type = e.currentTarget.dataset.type; //获取自定义的ID值  
      this.setData({
        activeType: type
      })
    },

    hide: function() {
      this.setData({
        showScreening: "none"
      })
    },
  
    startTimeClick(e) {
      this.setData({
        startTime: e.detail.value
      });
    },

    endTimeClick: function(e) {
      this.setData({
        endTime: e.detail.value
      });

    },
 
    contentClick: function(e) {
      this.setData({
        content: e.detail.value
      });

    },

    clean: function() {
      this.setData({
        startTime: "",
        endTime: "",
        content: "",
        activeType: ""
      });
    },

    confirm: function() {
      var start = this.data.startTime;
      var end = this.data.endTime;
      if (new Date(start.replace(/-/g, "/")).getTime() > new Date(end.replace(/-/g, "/")).getTime()) {
        wx.showModal({
          title: '温馨提示',
          content: '开始时间不能大于结束时间!',
          showCancel: false,
        });
        return;
      }
      if (new Date(start.replace(/-/g, "/")).getTime() == new Date(end.replace(/-/g, "/")).getTime()) {
        start += ' 00:00:00';
        end += ' 23:59:59';
      }

      this.triggerEvent('clickEvent', {
        startTime: start,
        endTime: end,
        content: this.data.content,
        activeType: this.data.activeType
      });
      this.setData({
        showScreening: "none"
      })
    }
  }
})