小程序之条件排序的实现

原创

用户6493868

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

74400

代码可运行

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

运行总次数：0

代码可运行

效果图

业务场景

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

实现步骤

引入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 删除。

小程序