小程序下拉筛选加重置

大部分列表场景中都需要进行列表筛选，所以需要把下拉做成一个component组件进行选用。

下面是效果图（不是很美观）

项目目录结构如下：

代码如下(代码有点多，但是复制就能运行)

dropdownmenu.js

Component({
  properties: {
    dropDownMenuTitle: {
      type: Array,
      value: [],
    },
    dropDownMenuDistrictData: {
      type:Array,
      value:[]
    },
   
    dropDownMenuSourceData: {
      type: Array,
      value: []
    },
  },
  data: {
    // private properity
    district_open: false, // 区域
    source_open: false, // 来源
    shownavindex: '',
    dropDownMenuDistrictDataRight: {},
    selected_district_id: 0,
    selected_district_name: '',
    selected_source_id: 0,
    selected_source_name:''
  },
  methods: {
    
    tapDistrictNav: function (e) {
      if (this.data.district_open) {
        this.setData({
          district_open: false,
          source_open: false,
          shownavindex: 0
        })
      } else {
        this.setData({
          district_open: true,
          source_open: false,
          shownavindex: e.currentTarget.dataset.nav
        })
      }

    },
    tapSourceNav: function (e) {
      if (this.data.source_open) {
        this.setData({
          source_open: false,
          district_open: false,
          shownavindex: 0
        })
      } else {
        this.setData({
          source_open: true,
          district_open: false,
          shownavindex: e.currentTarget.dataset.nav
        })
      }
    },
  
    selectDistrictItem: function (e) {
      var selectedId = e.target.dataset.model.id
      var selectedTitle = e.target.dataset.model.title;
      var selectedValue = e.target.dataset.model.value;
      this.closeHyFilter();
      this.setData({
        selected_district_id: selectedId,
        selected_district_name: selectedTitle
      })
      this.triggerEvent("selectedItem", { index: this.data.shownavindex, selectedId: selectedId, selectedTitle: selectedTitle, selectedValue: selectedValue})
    },

    selectSourceItem: function (e) {
      var selectedId = e.target.dataset.model.id
      var selectedTitle = e.target.dataset.model.title;
      var selectedValue = e.target.dataset.model.value;
      this.closeHyFilter();
      this.setData({
        selected_source_id: selectedId,
        selected_source_name:selectedTitle
      })
      this.triggerEvent("selectedItem", { index: this.data.shownavindex, selectedId: selectedId, selectedTitle: selectedTitle, selectedValue: selectedValue })
    },

    
    /**关闭筛选 */
    closeHyFilter: function () {
      if (this.data.district_open) {
        this.setData({
          district_open: false,
          source_open: false,
        })
      } else if (this.data.source_open) {
        this.setData({
          source_open: false,
          style_open: false,
        })
      }
    },
    // 重置
    reset:function(){
      this.setData({
        selected_district_i:0,
        selected_district_name:'',
        selected_source_id:0,
        selected_source_name:''
      })
      this.triggerEvent("reset")
    },
   
  },
  //组件生命周期函数，在组件实例进入页面节点树时执行
  attached: function () {
    
    
  },

})

dropdownmenu.json

{
  "component": true
}

dropdownmenu.wxml

<view class="nav">
  <view class="nav-child {{district_open? 'active' : ''}}" bindtap="tapDistrictNav" hidden='{{dropDownMenuDistrictData.length > 0 ? false :true}}' data-nav="1">
    <view class="nav-title">{{selected_district_name.length > 0 ?selected_district_name : dropDownMenuTitle[0]}}</view>
    <view class="icon"></view>
  </view>
  <view class="nav-child borders {{source_open? 'active' : ''}}" bindtap="tapSourceNav" hidden='{{dropDownMenuSourceData.length > 0 ? false : true}}' data-nav="2">
    <view class="nav-title">{{selected_source_name.length > 0 ?selected_source_name : dropDownMenuTitle[1]}}</view>
    <view class="icon"></view>
  </view>
  <view class="nav-child " data-nav="2">
    <view class="nav-title" bindtap="reset">重置</view>
  </view>
</view>

<view class="container container_hd {{district_open ? 'show' : 'disappear'}} ">
  <view class='z-height'>
    <view>
      <block wx:for="{{dropDownMenuDistrictData}}" wx:key="unique">
        <view class="sortitem {{selected_district_id==item.id ? ' active ' : ' '}}" data-model='{{item}}' bindtap='selectDistrictItem'> {{item.title}}</view>
      </block>
    </view>
  </view>
</view>
<view class="container container_hd {{source_open ? 'show' : 'disappear'}} ">
  <view class='z-height'>
    <view>
      <block wx:for="{{dropDownMenuSourceData}}" wx:key="unique">
        <view class="sortitem {{selected_source_id==item.id ? ' active ' : ' '}}" data-model='{{item}}' bindtap='selectSourceItem'> {{item.title}}</view>
      </block>
    </view>
  </view>
</view>

dropdownmenu.wxss

.page {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}

.position {
  position: absolute;
}

.nav {
  position: relative;
  z-index: 99;
  display: flex;
  border-bottom: 1px solid #f7f7f7;
  background: #fff;
}

.nav-child {
  display: flex;
  flex: 1;
  text-align: center;
  height: 48rpx;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin: 20rpx 0;
}

.borders-right {
  border-right: 1px solid #e6e6e6;
}

.borders-left {
  border-left: 1px solid #e6e6e6;
}

.borders {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

.nav-title {
  display: inline-block;
}

.icon {
  display: inline-block;
  border: 4px solid transparent;
  border-top: 4px solid #9b9b9b;
  margin-left: 5px;
  margin-top: 10rpx;
}

.container {
  position: relative;
  z-index: 4;
  font-size: 14px;
}


.slidedown {
  transform: translateY(0%);
}

.district {
  position: absolute;
  display: none;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.5);
}

.district .half {
  overflow-y: scroll;
  float: left;
  width: 50%;
  height: 600rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  font-size: 14px;
}

.half view {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 15rpx;
}

.half-left {
  background: #f7f7f7;
}

.half-center {
  background: #fff;
}

.half-right {
  background: #fff;
}

.half-right view {
  border-bottom: 1px solid #f7f7f7;
}

.current_left_select {
  background: #fff;
}

.current_right_select {
  background: #fff;
  color: #fc6060;
}

.nav-child.active .nav-title {
  color: #fc6060;
}

.nav-child.active .icon {
  border-bottom: 4px solid #fc6060;
  border-top: 0;
}

@keyframes slidown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0%);
  }
}

.slidown {
  display: block;
  animation: slidown 0.2s ease-in both;
}

@keyframes slidup {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

.z-height {
  overflow-y: scroll;
  background: #fff;
}

.slidup {
  display: block;
  animation: slidup 0.2s ease-in both;
}

.disappear {
  display: none;
}

.show {
  display: block;
}

.slidowntop {
  display: flex;
  flex-direction: row;
  padding: 20rpx 24rpx 10rpx 24rpx;
}

.emptyall {
  margin-left: 475rpx;
  color: #fc6060;
}

.emptyallright {
  width: 80rpx;
  text-align: center;
}

.endselect {
  width: 350rpx;
  text-align: left;
}

.return {
  margin-left: 200rpx;
  color: #fc6060;
}

.slidowncenter {
  margin-top: 20rpx;
  padding-top: 20rpx;
  padding-left: 24rpx;
  display: flex;
  flex-direction: row;
  align-content: space-between;
  border-top: solid #d1d3d4 1rpx;
}

.slidownbottom {
  margin-top: 10rpx;
  padding: 10rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.sortitem {
  border-bottom: solid #f7f7f7 1rpx;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}

.sortitem.active {
  color: #fc6060;
}

.container_hd {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.5);
}

contract.js

const app = getApp()
const config = require('../../config.js')
Page({
  /**
   * 页面的初始数据
   */
  data: {
    filters:{
      verify:'',
      pay:''
    },
    //搜索框输入内容
    name:'',
    token:"",
    pageNumber:1,
    pageSize:3,
    contractList:[],
    dropDownMenuTitle: ['审核状态', '付款状态'],
    data1: [
      {
        id: 1, title: '审核中', value:'2'
      },
      {
        id: 2, title: '审核通过', value: '1'
      },
      {
        id: 3, title: '审核未通过', value: '0'
      },
    ],
    data2: [
      { id: 4, title: '全部付款', value: '1' },
      { id: 5, title: '部分付款', value: '2' },
      { id: 6, title: '未付款', value: '0'}],
    nvabarData: {
      showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
      title: '合同信息查询', //导航栏 中间的标题
    },
    height: app.globalData.height * 2 + 20
  },
  // 重置筛选条件
  reset:function(){
    this.setData({
      filters: {
        verify: '',
        pay: ''
      },
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  selectedItem: function (e) {
    if (e.detail.selectedId == 1 || e.detail.selectedId == 2 || e.detail.selectedId == 3){
      this.data.filters.verify = e.detail.selectedValue
    }else{
      this.data.filters.pay = e.detail.selectedValue
    }
    //console.log('id --' + e.detail.selectedId + "cityname = " + e.detail.selectedTitle + " value--" + e.detail.selectedValue);
  },
  bindconfirm: function (e) {
    this.data.name = e.detail.name;

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      filters: {
        verify: '',
        pay: ''
      },
      name:'',
      pageNumber:1
    })
    //隐藏导航栏加载框
    wx.hideNavigationBarLoading();
    //停止下拉事件
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
    // this.data.pageNumber=this.data.pageNumber+1
    // this.getContractList();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

contract.json

{
  "navigationBarTitleText": "*******",
  "usingComponents": {
    "dropdownmenu": "/components/dropdownmenu/dropdownmenu",
  }
}

contract.wxml

<!-- 筛选条件 -->
<dropdownmenu dropDownMenuTitle='{{dropDownMenuTitle}}' dropDownMenuDistrictData='{{data1}}' dropDownMenuSourceData='{{data2}}'
  bind:selectedItem='selectedItem' bind:reset='reset'/>

contract.wxss

.page {
  width: 100%;
  min-height: 100%;
  background: #fff;
  overflow: hidden;
}

.position {
  position: absolute;
}

.nav {
  position: relative;
  z-index: 99;
  display: flex;
  border-bottom: 1px solid #f7f7f7;
  background: #fff;
}

.nav-child {
  display: flex;
  flex: 1;
  text-align: center;
  height: 48rpx;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin: 20rpx 0;
}

.borders-right {
  border-right: 1px solid #e6e6e6;
}

.borders-left {
  border-left: 1px solid #e6e6e6;
}

.borders {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

.nav-title {
  display: inline-block;
}

.icon {
  display: inline-block;
  border: 4px solid transparent;
  border-top: 4px solid #9b9b9b;
  margin-left: 5px;
  margin-top: 10rpx;
}

.container {
  position: relative;
  z-index: 4;
  font-size: 14px;
}


.slidedown {
  transform: translateY(0%);
}

.district {
  position: absolute;
  display: none;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.5);
}

.district .half {
  overflow-y: scroll;
  float: left;
  width: 50%;
  height: 600rpx;
  line-height: 80rpx;
  box-sizing: border-box;
  font-size: 14px;
}

.half view {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 15rpx;
}

.half-left {
  background: #f7f7f7;
}

.half-center {
  background: #fff;
}

.half-right {
  background: #fff;
}

.half-right view {
  border-bottom: 1px solid #f7f7f7;
}

.current_left_select {
  background: #fff;
}

.current_right_select {
  background: #fff;
  color: #fc6060;
}

.nav-child.active .nav-title {
  color: #fc6060;
}

.nav-child.active .icon {
  border-bottom: 4px solid #fc6060;
  border-top: 0;
}

@keyframes slidown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0%);
  }
}

.slidown {
  display: block;
  animation: slidown 0.2s ease-in both;
}

@keyframes slidup {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

.z-height {
  overflow-y: scroll;
  background: #fff;
}

.slidup {
  display: block;
  animation: slidup 0.2s ease-in both;
}

.disappear {
  display: none;
}

.show {
  display: block;
}

.slidowntop {
  display: flex;
  flex-direction: row;
  padding: 20rpx 24rpx 10rpx 24rpx;
}

.emptyall {
  margin-left: 475rpx;
  color: #fc6060;
}

.emptyallright {
  width: 80rpx;
  text-align: center;
}

.endselect {
  width: 350rpx;
  text-align: left;
}

.return {
  margin-left: 200rpx;
  color: #fc6060;
}

.slidowncenter {
  margin-top: 20rpx;
  padding-top: 20rpx;
  padding-left: 24rpx;
  display: flex;
  flex-direction: row;
  align-content: space-between;
  border-top: solid #d1d3d4 1rpx;
}

.slidownbottom {
  margin-top: 10rpx;
  padding: 10rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.sortitem {
  border-bottom: solid #f7f7f7 1rpx;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}

.sortitem.active {
  color: #fc6060;
}

.container_hd {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.5);
}

感谢您的阅读，辛苦了