一、实现的效果图
二、实现的原理
在页面加载的时候，显示最原始的数据，当我们点击按钮的时候，触发筛选的功能，只显示符合条件的数据，再次点击的时候取消筛选的功能，显示原本的数据
在数据的显示过程中，可以设置一个临时的数组，在筛选的时候将临时数组清空，取消筛选的时候再将数值重新赋值给临时的数组显示出来
三、实现的代码
test1.js
/*test1.js*/
const app = getApp();
Page({
/* 页面的初始数据 */
data:{
studentFilter:false,//筛选数据的初始状态
studentList:null//筛选的数据
},
getstudentInfo:function(options){
var that = this;
wx.request({
url: "http://localhost/test/index.php",//这里修改成自己的url地址
success: function(rep) {
if (that.data.studentFilter) { // 如果已经筛选过，则展示原始数据
that.setData({
studentList: that.data.items,//已经筛选过数据，再次点击为取消筛选，可以将原本的数据赋值给studentList数组，然后再将studentList显示在页面上，就能够保证在点击之后显示原本的数据项
studentFilter: false,//false为为筛选的状态
items1:[],//一开始显示在页面的数据为items1的数组，在筛选之后要将原数组的内容消失，可以将数组的内容设置为空
});
}
else { // 否则进行数据筛选
var studentList = that.data.items.filter(function(item) {
return item.sex == '男'; // 筛选的内容为'projectType '值为'学生'
});
that.setData({
studentList: studentList,//将筛选的数据复制给studentList数组
studentFilter: true,//true表示为筛选的状态
items1:[],//一开始显示在页面的数据为items1的数组，在筛选之后要将原数组的内容消失，可以将数组的内容设置为空
});
}
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.request({
url: "http://localhost/test/index.php",
success: function (rep){
console.log(rep.data)
that.setData({
items: rep.data,//原始的数据项
items1:rep.data//数据的中转站，用来显示被筛选的数据，也能够随时的清空不影响到其他数据的显示
});
const itemsHeight = that.data.items.length * 50 // 假设每个 item 的高度为 50px
wx.setStorageSync('pageHeight', `${itemsHeight}px`)//这两句命令的作用时设置文本框显示的高度，当一个item项里面有多行数据时，会自动调整文本框的高度
}
}) /*获取项目库的数据*/
},
})test1.wxml文章来源：https://www.toymoban.com/news/detail-634829.html
<!-- test1.wxml -->
<view class="background">
<image class="backgroundimage" src="https://pic4.zhimg.com/v2-b1e47e987bdb3ae7cfe60089acb4b475_r.jpg?source=1940ef5c"></image>
<!-- 筛选学生的数据 -->
<image class=" icon1" src="../../static/学生.jpg" bindtap="getstudentInfo" wx:if="{{studentFilter == false}}" mode="widthFix"/>
<image class=" icon1" src="../../static/学生active.jpg" bindtap="getstudentInfo" wx:else mode="widthFix"/>
<!--学生数据-->
<view class="program-list" wx:for="{{ studentList }}">
<view class="product-item">
<view>{{item.name}}</view>
<view>{{item.program_type}}</view>
<view>{{item.sex}}</view>
</view>
</view>
<!--初始数据-->
<view class="program-list" wx:for="{{items1}}">
<view class="product-item">
<view>{{item.name}}</view>
<view>{{item.program_type}}</view>
<view>{{item.sex}}</view>
</view>
</view>
</view>test1.wxss文章来源地址https://www.toymoban.com/news/detail-634829.html
.background{
position: relative;
}/*背景图容器*/
.backgroundimage{
position: fixed;
background-size: cover;/*设置了背景图铺满整个容器*/
background-repeat: no-repeat;/*设置不重复平铺*/
background-position: center center;/*设置了背景图在容器中的位置为居中*/
height: 100%;
width: 100%;
background-attachment: fixed; /* 将背景图固定不动 */
z-index: -1;
}/*背景图的样式*/
.product-item {
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color:aliceblue;
width: 600rpx;
border-radius: 15rpx;
height: 210rpx;
}/*显示被搜索的内容*/
.program-list{
padding: 15rpx;
}/*初始数据文本框的容器，用来确认内部每个item项的样式*/
.program-item{
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color:rgb(250, 111, 11);
width: 600rpx;
border-radius: 15rpx;
height: 210rpx;
}/*每一个item项的属性*/
.icon1{
width: 85rpx;
height: 85rpx;
}/*筛选的样式*/
到了这里，关于微信小程序实现筛选的功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
