前言
本示例主要介绍多重筛选场景，利用数组方法过滤满足条件的数据，利用LazyForEach实现列表信息的渲染以及刷新。
效果图预览
使用说明
- 等待列表数据全部加载完成后，点击筛选类型，展开筛选数据。
- 选中想要筛选的数据，点击确认，列表刷新。
- 再次点开筛选类型，保留上次筛选的内容，点击重置筛选内容复原，列表数据恢复为未筛选前的数据。
实现思路
本例涉及的关键特性和实现方案如下：
-
使用Grid实现筛选条件布局。
Grid() { ForEach(this.item.options, (options: string, idx: number) => { GridItem() { Text(options) .textAlign(TextAlign.Center) .fontSize(16) .height(40) .width('100%') } ... }) } .columnsTemplate('1fr 1fr 1fr') .rowsGap(16) .columnsGap(16) .margin({ left: 16, right: 6, top: 8, bottom: 8 }) .layoutDirection(GridDirection.Row) .constraintSize({ minHeight: '15%', maxHeight: '15%'// grid会撑满maxHeight，先限定死高度 })
-
使用数组方法对筛选数据进行过滤，得到筛选数据。
GridItem() { Text(options) .textAlign(TextAlign.Center) .fontSize(16) .height(40) .width('100%') } .onClick(() => { if (this.item.selectItem.includes(idx)) { let index = this.item.selectItem.indexOf(idx); let listIdx = this.changData.indexOf(options); // 删除已存在的筛选数据的index值 this.item.selectItem.splice(index, 1); // 过滤出来没有重复数据的筛选值 this.changData = this.changData.filter(i => i !== options); this.selectArr = this.item.selectItem; // 删除已选择的数据的行数index数组 this.arrayListData.splice(listIdx, 1); } else { // 添加筛选数据的index值 this.item.selectItem.push(idx); // 添加选中的数据 this.changData.push(options); this.selectArr = this.item.selectItem; // 添加选择的数据的行数index数组 this.arrayListData.push(this.listIndex); } })
-
得到筛选的数据后根据点击的筛选数据行数，使用has进行if判断看是否满足多重筛选的条件。
Button('确认') .height(40) .width(150) .backgroundColor(Color.White) .fontColor('#333') .onClick(() => { this.isShow = false; let arrayListData = new Set(this.arrayListData) if (arrayListData.has(0) && !arrayListData.has(1)) { // 仅选择停放时间 this.siteList.timeMultiFilter(this.changData); } else if (!arrayListData.has(0) && arrayListData.has(1)) { // 仅选择套餐类型 this.siteList.typeMultiFilter(this.changData); } else if (!arrayListData.has(0) && !arrayListData.has(1) && arrayListData.has(2)) { // 仅选择充电 this.siteList.getInitalList(); } else if (this.changData.length === 0) { // 未对数据进行选择 this.siteList.getInitalList(); } else { // 多重筛选 this.siteList.multiFilter(this.changData); } if (this.siteList.totalCount() === 0) { this.siteList.getInitalList(); promptAction.showToast({ message: "未找到相关数据" }); } })
-
使用filter过滤出来符合条件的数据，筛选出来的数组构建一个新的Set，使用Set中的has判断列表中相关数据是否存在。
public multiFilter(changData: Array) { let siteListString: string | undefined = AppStorage.get('siteList') if (siteListString) { let siteListObject: SiteListDataSource | undefined = JSON.parse(siteListString) if (siteListObject === undefined) { return } this.initialSiteList = siteListObject.dataList this.dataList = [] this.dataList = this.initialSiteList // 筛选数据 let changDataSet = new Set(changData) let dataList: SiteItem[] = this.dataList.filter(item => { item.siteBale = item.siteBale.filter(item => { if ((item.time && item.type) && (changDataSet.has(item.time)) && (changDataSet.has(item.type))) { return item } return }) return item.siteBale }) dataList = dataList.filter(item => item.siteBale.length !== 0); this.dataList = []; this.dataList = dataList; this.notifyDataReload(); } }
-
使用深拷贝保留原数据。
/**
- 返回原数组 */ public getInitalList() { let siteListString: string | undefined = AppStorage.get('siteList'); if (siteListString) { let siteListObject: SiteListDataSource | undefined = JSON.parse(siteListString); if (siteListObject === undefined) { return; } this.initialSiteList = siteListObject.dataList; this.dataList = []; this.dataList = this.initialSiteList; this.notifyDataReload(); } }
如果您想系统深入地学习 HarmonyOS 开发或想考取HarmonyOS认证证书，欢迎加入华为开发者学堂：
请点击→： HarmonyOS官方认证培训
