在移動應用中，各種列表頁面離不開下拉刷新和上拉加載更多，我們的商城應用也是如此。今天介紹一下在倉頡開發語言中如何實現這一功能。

下拉刷新

image.png

倉頡開發語言直接提供了下拉刷新的組件，叫做Refresh，使用起來也非常方便:

@State var headerLoading : Bool = false; 

Refresh(RefreshParams(refreshing: @Binder(this.headerLoading))) {
List{
        ForEach(this.carList,
        itemGeneratorFunc:{

            item:CarItem, index: Int64 => ListItem {
            }
            })
    }
}
.onRefreshing({ => 
    Timer.once(Duration.second*2,{=>
            this.headerLoading = false
           })
    AppLog.info('onRefreshing')
    })
.onStateChange({state =>
     AppLog.info('onStateChange')
    })

上述代碼演示了Refresh的基本使用，并且使用計時器模擬網絡加載效果，兩秒后自動加載完成，其中onRefreshing是進入刷新狀態的回調，onStateChange為刷新狀態改變的回調。

計時器的用法也還需要大家再次熟悉一下，Timer.once表示一次性的計時器，Duration.second*2表示執行間隔是2秒，這種寫法還是比較獨特的。

上拉加載更多

關于上拉加載更多，倉頡的文檔中并沒有這部分的內容，幽藍君參考ArkTs寫了一個解決方案，僅供大家參考。

image.png

實現思路是在List最后一行添加加載動畫組件，默認隱藏，當List滑動到最后一行則顯示加載動畫并開始請求數據，具體代碼如下：

@State var footerLoading:Bool = false

List{
    ForEach(this.carList,
        itemGeneratorFunc:{

            item:CarItem, index: Int64 => ListItem {
            }
            })

    ListItem {
        if(this.footerLoading){
            Row(12){
                LoadingProgress()
                .height(40)
                .width(40)

                Text('加載中...')
                .fontSize(14)
                .fontColor(Color.GRAY)
            }
            .width(100.percent)
            .height(50)
            .alignItems(VerticalAlign.Center)
            .justifyContent(FlexAlign.Center)
        }
    }
}
.onScrollIndex({startNum,endNum =>
    if(Int64(endNum) >= this.carList.size - 1){
            this.footerLoading = true
            Timer.once(Duration.second*3,{=>
                        this.footerLoading = false
                    })
    }
    CJTools.log('endNum-list:' + this.carList.size.toString())
    })

上面代碼需要注意的是如何判斷列表滑動到了底部，主要是判斷數組的長度，在倉頡中數組的長度屬性是size，類型是Int64。

以上就是今天的內容分享，感謝閱讀。##HarmonyOS語言##倉頡##購物#