微信小程序实现条件查询示例
目录
微信小程序实现条件查询示例
微信小程序实现条件查询示例
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>
结果显示