index.wxml
<view> <picker mode="selector" range="{{names}}" bindchange="bindNameChange"> <view class="picker"> <text>姓名:</text> <text>{{selectedName}}</text> </view> </picker> <picker mode="selector" range="{{ages}}" bindchange="bindAgeChange"> <view class="picker"> <text>年龄:</text> <text>{{selectedAge}}</text> </view> </picker> <!-- 其他筛选条件的选择器 --> <button bindtap="filterData">筛选</button> </view>
index.js
Page({ data: { names: ['张三', '李四', '王五'], selectedName: '请选择', ages: ['20岁以下', '20~30岁', '30~40岁', '40岁以上'], selectedAge: '请选择', // 其他筛选条件的数组和变量 results: [] // 保存符合条件的人的姓名 }, // 选择器值改变时的回调函数 bindNameChange: function(e) { var names = this.data.names; var index = e.detail.value; this.setData({ selectedName: names[index] }) }, bindAgeChange: function(e) { var ages = this.data.ages; var index = e.detail.value; this.setData({ selectedAge: ages[index] }) }, // 其他选择器值改变时的回调函数 // 筛选按钮的点击事件 filterData: function() { var that = this; // 获取数据库实例 const db = wx.cloud.database(); // 构造筛选条件 var where = {}; if (that.data.selectedName != '请选择') { where.name = that.data.selectedName; } if (that.data.selectedAge != '请选择') { var ageRange = that.data.selectedAge.split; if (ageRange.length == 2) { var minAge = Number(ageRange[0]); var maxAge = Number(ageRange[1]); if (!isNaN(minAge) && !isNaN(maxAge)){ where.age = db.command.gte(minAge).and(db.command.lte(maxAge)); } } } // 其他筛选条件的判断和设置 // 从数据库中查询符合条件的记录 db.collection('people').where(where).get({ success: function(res) { // 提取符合条件的人的姓名 var results = res.data.map(function(item) { return item.name; }); that.setData({ results: results }); }, fail: function(res) { console.error(res); } }); } })
index.wxss
.results { font-size: 16px; line-height: 1.5; margin-top: 10px; }
来源:https://wenku.csdn.net/answer/94bdc9150fef4e9ab3ac621757060f2b