一、背景

页面包含搜索框和列表，列表默认展示所有数据并具有分页功能。然而，在输入关键字到搜索框时，列表未正确展示搜索结果。

二、功能实现

2.1、原代码及实现效果

import ChargeType from '../../viewModel/ChargeType'
import ChargeModel from '../../model/ChargeModel'

@Component
export default struct ChargeList {
  @State charges:ChargeType[] = []
  @Link stationId:number
  isLoading: boolean = false
  isMore: boolean = true
  controller: SearchController = new SearchController()
  showPanel:()=>void

  aboutToAppear(){
    //加载充电站数据
    this.chargeInfo('')
  }

  build() {
    Column({space:10}){
      //搜索
      Column({space:15}){
        Text('充电')
          .fontColor(Color.White)
          .fontSize(20)
          .margin({top:30})
        Search({placeholder:'请输入搜索内容',controller: this.controller})
          .placeholderColor(Color.Gray)
          .backgroundColor('#F5F5F5')
          .textFont({size:18})
          .onChange((value: string) => {
            console.log('搜索的值',value)
            this.chargeInfo(value)
          })
      }
      .width('100%')
      .height('20%')
      .padding({left:20,right:20})
      .backgroundColor($r('app.color.charge_header'))
      //列表
      List({space:10}){
        ForEach(this.charges,(item:ChargeType) => {
          ListItem(){
            this.chargeItem(item)
          }
          .onClick(() =>{
            console.log('弹出充电桩数据')
          })
        })
      }
      .width('95%')
      .layoutWeight(1)
      .onReachEnd(() => {
        if(!this.isLoading && this.isMore){
          this.isLoading = true
          // 翻页
          ChargeModel.pageNo++
          this.chargeInfo('')
        }
      })
    }
    .width('100%')
  }
  //item项
  @Builder chargeItem(item:ChargeType){
    Column({space:12}){
      Text(item.name).fontWeight(FontWeight.Bold)
      Row({space:8}){
        Text(`￥ ${item.pricePerHour}`).fontColor($r('app.color.pile_tanan'))
        Text('/度').fontColor($r('app.color.limit'))
        Blank()
        Text(item.tenantName).fontSize(18).fontColor($r('app.color.pile_tanan'))
        Blank()
        Image($r('app.media.fast')).width(20)
        Text(`闲${item.freePileTotal}`).fontWeight(FontWeight.Bold)
        Text(`/${item.pileTotal}`)
      }
      .width('100%')
      Row({space:8}){
        Text(`${item.distance.toFixed(2)}km`)
        Image($r('app.media.location')).width(20)
        Image($r('app.media.imgUrl')).width(20)
      }

    }
    .height('100%')
    .backgroundColor('#FFF')
    .height(120)
    .padding(10)
    .borderRadius(20)
    .alignItems(HorizontalAlign.Start)
  }

  //调取接口，获取充电站数据
  async chargeInfo(name){
    let res:any = await ChargeModel.getStations(name)
    if(res.responseCode === 200){
      let chargeRes = JSON.parse(res.result.toString())
      if(chargeRes.code == 0){
        this.charges = this.charges.concat(chargeRes.data.List)
        console.log('列表数据charges',this.charges.length,this.charges)
        this.isLoading = false
        if(!chargeRes.data.List || chargeRes.data.List.length === 0){
          this.isMore = false
        }
      }
    }
  }
}

说明：

①页面初次加载是当前页5条数据， 翻页后加载了所有数据7条

②搜索框输入关键字：x，列表仍然展示的所有数据7条，未展示搜索后的数据

2.2、改造原代码，解决搜索失效问题

分析问题：

这个问题可能出在搜索时未能正确重置 页码值pageNo 和清空原有数据，导致搜索结果未能正确展示在列表中。 

具体操作：

①在 chargeInfo() 方法中增加一个参数来标识是否需要重置 页码值pageNo 和清空原有数据

②在搜索时调用 chargeInfo() 方法时，传入 true 来重置 页码值pageNo 和清空数据

 

2.3、最终效果

说明：

左图为默认状态，右图为搜索结果

①搜索框输入关键字后，列表展示搜索后数据

②未搜索情况下展示默认当前页数据 

为什么名字后面加英文，搜索时也是输入的英文？？？

因为我使用的电脑模拟器查看的，不能切换中文，只能输入英文，在官网搜索后得到的结果是真机调试可以输入中文，真机我还未做测试😂😂