likes
comments
collection
share

简单实现条件筛选组件——微信小程序

作者站长头像
站长
· 阅读数 11

前言

最近做了一个微信小程序项目，列表页面有多个条件菜单项，点击条件菜单项选择相应的条件可以对列表数据进行筛选，并且有多个列表页面都需要实现条件筛选，因此封装成组件在页面中使用。

条件筛选功能简单描述

  1. 一共有5个条件菜单项，其中包括多级条件（该项目中最多为3级）、单个条件。

  2. 点击条件菜单项，该菜单项高亮显示，并弹出该条件菜单项下的条件数据

    a. 单个条件： 直接展示相应菜单项下的条件

    b. 多级条件： 一开始只展示第一级的条件，点击了第一级之后，才会展示相应第二级的条件数据，第三次的条件数据依次类推

  3. 点击展示出来的条件，会选中该条件，并高亮显示

  4. 点击确定按钮，请求相应条件的列表数据进行展示，并关闭弹出的条件弹窗。

  5. 点击重置按钮可以清除当前选中的条件

效果展示

（ps: 因为数据是真实的，所以处理了一下）

简单实现条件筛选组件——微信小程序

简单实现条件筛选组件——微信小程序

具体实现

顶部的搜索框和条件筛选模块抽离出来，封装为单独组件；条件数据可以在组件中获取，或者由外部页面传入，条件选项选中值由回调方法传到页面中使用。

页面布局

搜索框和条件筛选模块设置在页面顶部（相对定位）；条件选项弹窗和遮罩层使用绝对定位控制显示位置；并设置条件弹窗中的条件模块的最大高度 max-height: 600rpx,使其弹窗控制在页面顶部的一定范围内，不至于占据页面整屏

条件菜单项基本都是一样的，只是有一个列表页面只展示地区菜单项，因此数据是固定的，并使用一个flag值onlyDistrict控制是否显示除地区菜单项之外的菜单项

（ps: 每个条件菜单项对应一个条件选项弹窗，代码太多了，这里就展示了单个条件布局）

<view class='choose-list'>
  <view class="container">
    <view class="select-box">
      <block wx:if="{{!onlyDistrict}}">
        <view class="item {{industry_open? 'active' : ''}}" bindtap="openIndustry" >
          行业
        </view>
        <view class="item {{type_open? 'active' : ''}}" bindtap="openType">
          菜单2
        </view>
        <view class="item {{landing_open? 'active' : ''}}" bindtap="openLanding" >
          菜单3
        </view>
        <view class="item {{cooperate_open? 'active' : ''}}" bindtap="openCooperate">
          菜单4
        </view>
      </block>
      <view class="item {{district_open? 'active' : ''}}" bindtap="openDistrict" >
        地区
      </view>
    </view>
  </view>
  <!-- 单个条件-->
  <view class="select-lists single-select-lists {{type_open ? 'slidup' : 'slidown'}} ">
    <view class="list select-lists-center">
      <view wx:for="{{typeData}}" wx:key="index" class="item {{item.is_chose? 'current': ''}}" bindtap="selectSingle" data-id="{{item.id}}" data-type="type">
        <text>{{item.name}}</text>
        <image src='/assets/images/chose-icon.png' class="icon {{item.is_chose?'choose':''}}"></image>
      </view>
    </view>
    <view class='form-btn'>
      <view class='btn btn-reset' bindtap='selectListsEmpty'>重置</view>
      <view class='btn btn-submit' bindtap='submitType'>确定</view>
    </view>
  </view>
</view>
<!-- 遮罩层-->
<view class="mask {{mask? 'active' : ''}}"></view>

交互处理

点击条件菜单筛选栏，若当前筛选项被选中，就展示相应条件弹框，定义变量（每个条件菜单项设置一个值）控制弹框显示或隐藏

openIndustry() {
    if (this.data.industry_open) {
    this.setData({
      industry_open: false,
      mask: false,
    })
    } else {
    this.setData({
      industry_open: true,
      mask: true,
    })
    }

    this.setData({
        type_open: false,
        landing_open: false,
        cooperate_open: false,
        district_open: false,
    })
 },

单个条件选择

点击某个条件选项，当前条件下其他选项取消选中，当前选项被选中，设置is_chose为true（一开始获取到的条件数据，给每一项条件都加上了is_chose字段，并设置为false）

selectSingle(e) {
  let id = e.currentTarget.dataset.id //当前条件选项的id
  let type = e.currentTarget.dataset.type // 当前条件菜单项的类型
  if (type == 'type') {
    let typeData = this.data.typeData
    typeData.forEach(item => {
      if (item.id == id) {
        item.is_chose = true
      } else {
        item.is_chose = false
      }
    })
    this.setData({
      typeData,
      type_id: id,
    })
  }
},

多级条件

点击一级条件选项，获取当前选项下的二级条件数据，点击选中某项条件也是根据is_chose来控制

selectleft(e) {
  let pid = e.currentTarget.dataset.pid
  let industryData = this.data.industryData
  if (this.properties.cateType == 'company') {
    this.getCateData({
      type: 'company_industry',
      pid
    })
  }

  if (this.properties.cateType == 'project') {
    this.getCateData({
      type: 'project_industry',
      pid
    })
  }

  industryData.forEach(item => {
    if (item.id == pid) {
      item.is_chose = true
    } else {
      item.is_chose = false
    }
  })

  this.setData({
    industryData,
    industry_id: pid
  })
},
selectCenter(e) {
  let id = e.currentTarget.dataset.id
  let industryChildData = this.data.industryChildData
  industryChildData.forEach(item => {
    if (item.id == id) {
      item.is_chose = true
    } else {
      item.is_chose = false
    }
  })

  this.setData({
    industryChildData,
    industry_id: id
  })
},

点击重置按钮，清除当前条件数据，设为初始值

点击确定按钮，使用this.triggerEvent()将条件数据传给页面，关闭弹框，在页面中调用函数请求相应条件的列表数据

submitFilter() {
  if (this.data.currentProvinceId) {
      this.triggerEvent("selectedItem", {
        province_id: this.data.currentProvinceId,
        province_title: this.data.currentProvinceTitle,
        city_id: this.data.currentCityId,
        city_title: this.data.currentCityTitle,
        area_id: this.data.currentAreaId,
      })
      this.setData({
        district_open: false,
        mask: false,
      })
    } else {
      wx.showToast({
        icon: 'none',
        title: '请选择地区',
      })
    }
},

使用组件

<filter onlyDistrict="{{true}}" provinceData="{{provinceData}}" bind:selectedItem='selectedItem' />

selectedItem: function (e) {
    let keyword = e.detail.keyword
    let province_id = e.detail.province_id
    let city_id = e.detail.city_id
    let area_id = e.detail.area_id
    this.setData({
      keyword,
      province_id,
      city_id,
      area_id,
    })
    this.initData()
  },

本文正在参加「金石计划」

转载自:https://juejin.cn/post/7221081978995965989
评论
请登录