小程序筛选功能代码带wxss带数据库 筛选条件：姓名 年龄 年份 奖励 展示数据：符合条件的人的姓名

首先，需要在小程序的页面中添加筛选条件的选择器和一个“筛选”按钮。选择器可以使用`<picker>`标签实现，例如：

<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>

其中，`names`和`ages`是在页面的`data`中定义的数组，用于存储可供选择的姓名和年龄列表，`selectedName`和`selectedAge`是当前选择的姓名和年龄。`bindNameChange`和`bindAgeChange`是选择器值改变时的回调函数，用于更新`selectedName`和`selectedAge`的值。

接下来，需要在页面的`js`中实现`filterData`函数，用于从数据库中获取符合条件的人的姓名并展示。假设数据库中的每个记录都有`name`、`age`、`year`和`reward`四个属性，可以使用`wx.cloud.database()`获取数据库实例，然后调用`where()`方法设置筛选条件。例如：

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);
      }
    });
  }
})

最后，需要在`wxss`中定义用于展示符合条件的人的姓名的样式。例如：

.results {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 10px;
}