一、功能简介
本篇实现一个具备下拉刷新 + 上滑加载更多动效的列表,结合位移反馈、加载指示器动画,实现用户滚动交互时的视觉节奏与加载状态提示,适用于长列表内容展示场景,如评论流、资讯流等。
二、关键技术点
功能 | 技术实现 |
---|---|
下拉触发刷新 | Scroll 滚动位置监听 + offset |
动效反馈 | 加载中旋转动效 + 缓入拉动反馈 |
上滑加载更多 | 滚动到底部触发 loadMore 回调 |
三、页面结构
entry/src/main/ets/pages/PullRefreshListDemo.ets
四、ArkTS 实战代码(PullRefreshListDemo.ets)
@Entry
@Component
struct PullRefreshListDemo {
@State list: string[] = []
@State refreshing: boolean = false
@State loadingMore: boolean = false
@State pullOffset: number = 0
aboutToAppear() {
this.list = Array.from({ length: 10 }, (_, i) => `初始内容 ${i + 1}`)
}
async refreshData() {
this.refreshing = true
await new Promise(resolve =>