小程序之条件排序的实现

效果图

业务场景

在小程序端对数据显示的时候有时候我们需要按条件进行筛选查询如按时间排序，按地点排序等等

实现步骤

引入van-dropdown-item组件

代码语言：javascript复制

"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index",

页面显示

在wxml页面添加如下代码

代码语言：javascript复制

  <van-dropdown-menu active-color="#E1B368">
	  <van-dropdown-item 
      value="{{ value2 }}" 
      options="{{ option2 }}"
      bind:change="filterValue2"
	  />
	  <van-dropdown-item 
      value="{{ value3 }}" 
      options="{{ option3 }}"
      bind:change="filterValue3"
	  />	  
  </van-dropdown-menu>

js中将条件值参数传递给后台进行数据排序

代码语言：javascript复制

query:{
        p:this.data.page,
        status: this.data.value2 || undefined,
        sort: this.data.value3 || undefined,
        serchvalue:this.data.serchvalue,
      }

小程序 dropdown 排序 数据

1 人点赞