数据筛选页面:
数据筛选功能可以让用户按照某些条件对数据进行筛选，并展示满足条件的数据列表。下面是一个简单的案例，假设我们有一个商品列表，每个商品都有名称、价格、类型等属性。用户可以通过选择价格区间和类型来筛选商品。
首先，我们需要在小程序的页面中创建一个筛选的表单，包括价格区间选择和类型选择。在 wxml 文件中，可以添加以下代码：
<view class="filter">
<view class="filter-row">
<picker mode="selector" range="{{priceRange}}" bindchange="onPriceChange">
<view>{{selectedPrice}}</view>
</picker>
</view>
<view class="filter-row">
<picker mode="selector" range="{{typeList}}" bindchange="onTypeChange">
<view>{{selectedType}}</view>
</picker>
</view>
</view>
其中，priceRange 是一个价格区间的数组，typeList 是一个商品类型的数组。selectedPrice 和 selectedType 是绑定到选择结果的变量。
然后，在小程序的页面的 js 文件中，我们需要定义相应的函数来处理筛选条件的变化。以下是相应的代码：
Page({
data: {
priceRange: ['全部', '0-50', '50-100', '100-200'],
selectedPrice: '全部',
typeList: ['全部', '电子产品', '家居用品', '服装'],
selectedType: '全部',
productList: [] // 商品列表数据
},
onPriceChange: function (e) {
var index = e.detail.value;
var priceRange = this.data.priceRange;
var selectedPrice = priceRange[index];
this.setData({
selectedPrice: selectedPrice
});
// 根据变化的筛选条件重新获取商品列表数据
this.getProductList();
},
onTypeChange: function (e) {
var index = e.detail.value;
var typeList = this.data.typeList;
var selectedType = typeList[index];
this.setData({
selectedType: selectedType
});
// 根据变化的筛选条件重新获取商品列表数据
this.getProductList();
},
getProductList: function () {
var selectedPrice = this.data.selectedPrice;
var selectedType = this.data.selectedType;
// 发起请求，获取满足筛选条件的商品列表数据
// 这里可以调用后端的接口来获取数据，也可以在前端通过条件判断来筛选数据
// ...
// 将获取到的商品列表数据更新到页面中
this.setData({
productList: productList
});
}
});
在 getProductList 函数中，我们可以发起请求，获取满足筛选条件的商品列表数据。在这个函数中，你可以调用后端的接口来获取数据。如果你的商品数据是在前端，你也可以在这个函数中通过条件判断来筛选数据。
最后，我们需要在页面中展示满足条件的商品列表。在 wxml 文件中，我们可以添加以下代码：
<view class="product-list">
<view wx:for="{{productList}}">
<view class="product-item">
<!-- 展示商品信息 -->
</view>
</view>
</view>
这样，当用户选择筛选条件变化时，getProductList 函数将被调用，满足条件的商品列表将被展示出来。
搜索功能页面：
搜索功能可以让用户根据关键字搜索相关的数据。下面是一个简单的案例，假设我们有一个商品列表，用户可以通过输入关键字来搜索相关的商品。
首先，在小程序的页面中创建一个搜索的输入框。在 wxml 文件中，可以添加以下代码：
<view class="search"> <input type="text" bindinput="onSearchInput" placeholder="请输入关键字"> </view>
然后，在小程序的页面的 js 文件中，我们需要定义相应的函数来处理搜索关键字的变化。以下是相应的代码：
Page({
data: {
keyword: '',
productList: [] // 商品列表数据
},
onSearchInput: function (e) {
var keyword = e.detail.value;
this.setData({
keyword: keyword
});
// 根据关键字重新获取商品列表数据
this.getProductList();
},
getProductList: function () {
var keyword = this.data.keyword;
// 发起请求，获取满足搜索关键字的商品列表数据
// 这里可以调用后端的接口来获取数据，也可以在前端通过条件判断来筛选数据
// ...
// 将获取到的商品列表数据更新到页面中
this.setData({
productList: productList
});
}
});
在 getProductList 函数中，我们可以发起请求，获取满足搜索关键字的商品列表数据。同样，你可以调用后端的接口来获取数据，或者在前端通过条件判断来筛选数据。
最后，我们也需要在页面中展示满足搜索关键字的商品列表。在 wxml 文件中，我们可以添加以下代码：
<view class="product-list">
<view wx:for="{{productList}}">
<view class="product-item">
<!-- 展示商品信息 -->
</view>
</view>
</view>
这样，当用户输入搜索关键字时，getProductList 函数将被调用，满足搜索关键字的商品列表将被展示出来。
链接：https://blog.csdn.net/qq_67153941/article/details/138638724