小程序之条件排序的实现

原创

用户6493868

修改于 2022-03-08 06:41:54

7360

修改于 2022-03-08 06:41:54

文章被收录于专栏：vue封装H5

效果图

业务场景

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

实现步骤

引入van-dropdown-item组件

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

页面显示

在wxml页面添加如下代码

  <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中将条件值参数传递给后台进行数据排序

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

小程序