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

以下是一个简单的小程序筛选功能的代码示例，包括了wxss和数据库。

1. 创建数据库表结构

在微信开发者工具的云开发控制台中创建一个名为“students”的数据库集合，包含字段：姓名、年龄、年份、奖励。

2. 编写wxml文件

<!-- 筛选条件表单 -->
<view class="filter">
  <form bindsubmit="onFormSubmit">
    <label>姓名</label>
    <input type="text" name="name" placeholder="请输入姓名">
    <label>年龄</label>
    <input type="text" name="age" placeholder="请输入年龄">
    <label>年份</label>
    <input type="text" name="year" placeholder="请输入年份">
    <label>奖励</label>
    <input type="text" name="reward" placeholder="请输入奖励">
    <button formType="submit">筛选</button>
  </form>
</view>

<!-- 展示符合条件的数据 -->
<view class="result">
  <view wx:for="{{students}}" wx:key="{{index}}">
    <view wx:if="{{item.show}}">
      <text>{{item.name}}</text>
    </view>
  </view>
</view>

3. 编写wxss文件

.filter {
  margin-bottom: 20rpx;
}

label {
  display: inline-block;
  width: 80rpx;
  text-align: right;
  margin-right: 10rpx;
}

input {
  display: inline-block;
  width: 200rpx;
  height: 40rpx;
  border: 1rpx solid #ccc;
  border-radius: 4rpx;
  padding: 0 10rpx;
  margin-bottom: 10rpx;
}

button {
  display: inline-block;
  width: 80rpx;
  height: 40rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 4rpx;
  border: none;
}

.result {
  font-size: 16px;
  line-height: 40rpx;
}

4. 编写js文件

const db = wx.cloud.database() // 初始化数据库
Page({
  data: {
    name: '',
    age: '',
    year: '',
    reward: '',
    students: [] // 存放所有学生信息
  },
  onLoad: function () {
    // 获取所有学生信息
    db.collection('students').get().then(res => {
      this.setData({
        students: res.data
      })
    })
  },
  onFormSubmit: function (e) {
    // 获取表单数据
    const { name, age, year, reward } = e.detail.value
    // 过滤符合条件的学生
    const students = this.data.students.map(student => {
      student.show = true // 默认展示
      if (name && !student.name.includes(name)) {
        student.show = false
      }
      if (age && student.age !== parseInt(age)) {
        student.show = false
      }
      if (year && student.year !== parseInt(year)) {
        student.show = false
      }
      if (reward && !student.reward.includes(reward)) {
        student.show = false
      }
      return student
    })
    this.setData({
      name,
      age,
      year,
      reward,
      students
    })
  }
})

以上代码实现了一个简单的小程序筛选功能，用户可以输入姓名、年龄、年份、奖励等条件进行筛选，符合条件的学生姓名将会展示在页面上。