微信小程序实现条件查询示例

微信小程序实现条件查询示例

index.js

//index.js
//获取应用实例
const app = getApp()
const db = wx.cloud.database();
const _ = db.command;
Page({
  data:{
    scoreMark:false,
    ageMark:false,
    lists:[{
      name:"1111",
      age:11,
      score:33
    }]
  },
  onShow(){
    const that = this;
    db.collection("test").get({
      success:function(res){
        that.setData({
          lists: res.data
        })
      }
    });
  },
  scoreFilter(e){
    this.setData({
      scoreMark:e.detail.value
    },this.filter);
  },
  ageFilter(e){
    this.setData({
      ageMark: e.detail.value
    },this.filter);
    
  },
  filter(){
    const that = this;
    let score = this.data.scoreMark;
    let age = this.data.ageMark;
    let filterObj = {}
    if(score){
      filterObj.score = _.gte(60);
    }
    if(age){
      filterObj.age = _.lte(20);
    }
    db.collection("test").where(filterObj).get({
      success: function (res) {
        that.setData({
          lists: res.data
        })
      }
    });
    
  }
})

index.wxml

<!--index.wxml-->

<view class="container">
  <view class="filter-item">
    <view>过滤不及格的</view>
    <switch checked="{{scoreMark}}" id="test1" bindchange='scoreFilter'></switch>
  </view>
   <view class="filter-item">
    <view>年龄在20岁以下的</view>
    <switch bindchange='ageFilter'></switch>
  </view>
  <view class="title">表格</view>
  <view class="table">
    <view class="tr th">
      <view class="td">
        姓名
      </view>
      <view class="td">
        年龄
      </view>
      <view class="td">
        成绩
      </view>
    </view>
    <view class="tr" wx:for="{{lists}}">
      <view class="td">
      {{item.name}}
      </view>
      <view class="td">
         {{item.age}}
      </view>
      <view class="td">
         {{item.score}}
      </view>
    </view>
  </view>
 
</view>

结果显示