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

好的，这是一个小程序筛选功能的基本流程，我来给你讲一下具体实现的步骤：

1. 前端页面设计：设计一个页面，包括筛选条件的输入框和一个展示符合条件人姓名的列表。可以使用wxml和wxss进行布局、样式设计。

2. 后端数据库设计：设计一个数据库表，包括姓名、年龄、年份、奖励等字段。可以使用小程序提供的云开发进行数据库的创建和管理。

3. 前端与后端的数据交互：使用小程序提供的API，将前端页面输入的筛选条件传递到后端数据库中，查询符合条件的人的姓名，并将数据返回到前端页面进行展示。

4. 前端展示数据：将后端返回的符合条件的人的姓名展示到前端页面上。可以使用小程序提供的列表组件进行展示。

5. wxss样式设计：可以使用wxss对前端页面进行美化，增加交互性和用户体验。

总之，小程序筛选功能带wxss带数据库的实现需要前后端的配合，前端负责页面设计和展示，后端负责数据的存储和查询。需要注意数据传递的安全性和效率，同时需要考虑用户体验和界面美感。

相关问题

小程序筛选功能代码带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;
}

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

好的，首先你需要在 wxml 文件中添加对应的筛选条件，例如：

<!-- 筛选条件 -->
<view class="filter">
  <input placeholder="姓名" bindinput="onNameInput"/>
  <input placeholder="年龄" bindinput="onAgeInput"/>
  <input placeholder="年份" bindinput="onYearInput"/>
  <input placeholder="奖励" bindinput="onRewardInput"/>
</view>

<!-- 展示数据 -->
<view class="result">
  <block wx:for="{{filteredData}}" wx:key="index">
    <text>{{item.name}}</text>
  </block>
  <block wx:if="{{filteredData.length === 0}}">
    <text>暂无数据</text>
  </block>
</view>

然后在对应的 js 文件中定义筛选条件和对应的筛选方法，例如：

Page({
  data: {
    // 原始数据
    originalData: [
      {name: '小明', age: 18, year: 2021, reward: '一等奖'},
      {name: '小红', age: 20, year: 2021, reward: '二等奖'},
      {name: '小刚', age: 22, year: 2020, reward: '三等奖'},
    ],
    // 筛选条件
    nameFilter: '',
    ageFilter: '',
    yearFilter: '',
    rewardFilter: '',
  },

  // 输入姓名时更新筛选条件
  onNameInput(e) {
    this.setData({
      nameFilter: e.detail.value,
    })
    this.filterData()
  },

  // 输入年龄时更新筛选条件
  onAgeInput(e) {
    this.setData({
      ageFilter: e.detail.value,
    })
    this.filterData()
  },

  // 输入年份时更新筛选条件
  onYearInput(e) {
    this.setData({
      yearFilter: e.detail.value,
    })
    this.filterData()
  },

  // 输入奖励时更新筛选条件
  onRewardInput(e) {
    this.setData({
      rewardFilter: e.detail.value,
    })
    this.filterData()
  },

  // 筛选数据
  filterData() {
    const { originalData, nameFilter, ageFilter, yearFilter, rewardFilter } = this.data
    const filteredData = originalData.filter(item => {
      return item.name.includes(nameFilter) &&
             (ageFilter === '' || item.age === parseInt(ageFilter)) &&
             (yearFilter === '' || item.year === parseInt(yearFilter)) &&
             item.reward.includes(rewardFilter)
    })
    this.setData({
      filteredData,
    })
  },
})

最后在 wxss 文件中添加样式，例如：

.filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.result {
  margin-top: 10px;
}

.result text {
  display: block;
  margin-bottom: 5px;
}