HarmonyOS 下拉重新整理 上拉載入更多 第二種實現方式

西北野狼發表於2024-06-25

透過Refresh元件Api實現下拉重新整理，上拉載入更多

  • refreshing：當前元件是否正在重新整理。
  • offset：下拉起點距離元件頂部的距離。預設值：16，單位vp。
  • friction：下拉摩擦係數，取值範圍為0到100。

下拉重新整理實現

  • 重新整理狀態：透過控制refreshing來控制；
  • 重新整理狀態變更：透過onStateChange回撥監聽是重新整理狀態的時候，重新整理列表資料；

上拉載入更多實現

使用onReachEnd事件來實現上拉載入更多。當使用者滾動到列表底部時，觸發該事件，並在事件處理函式中呼叫資料載入的方法。

Refresh({refreshing:$$this.isRefreshing,offset:30,friction:70}){
      Stack({alignContent:Alignment.Top}){
        List(){
          ListItem(){
            Column(){
             // 列表內容實現
            }
          }

        }.height('100%')
        .width('100%').margin({top:90})
        .onReachEnd(()=>{
		// 上拉載入更多：此處向陣列尾部新增一頁資料
        })
      }
    }.onStateChange((refreshStatus:RefreshStatus)=>{
      if(refreshStatus==RefreshStatus.Refresh){
        // 下拉重新整理：此處重新整理陣列資料
      }
    })
    .onRefreshing(() => {
	// 進入重新整理狀態
      console.log(this.isRefreshing + '')
      setTimeout(() => {
        // 結束重新整理狀態
        this.isRefreshing = false
      }, 1000)
      console.log('onRefreshing test')
    })

相關文章