HarmonyOS 鸿蒙Next List组件如何实现下拉刷新效果？

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next List组件如何实现下拉刷新效果？
有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

关于HarmonyOS 鸿蒙Next List组件如何实现下拉刷新效果？的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。

Harmonyos Next教程
6 回复

List组件如何实现下拉刷新效果？

可以监听触底事件，触底的时候刷新数据。比如刷新扫描的ble列表：#HarmonyOS NEXT 体验官#开发一款BLE低功耗蓝牙调试助手(一)连接BLE服务端-鸿蒙开发者社区-51CTO.COM

       ForEach(this.bleDevicesArray, (data: ble.ScanResult, index: number) => {
          ListItem() {
             ....
              }
.onReachEnd(()=>{ // 滑动到列表底部后刷新扫描列表
        bleScanManager.onScanResultCallback(this.BleScanCallback);
      })<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

具体参考：创建列表 (List)-构建布局-开发布局-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

楼主问题解决了吗？

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

[@State](/user/State) show: boolean = false
[@State](/user/State) isRefreshing: boolean = false
[@State](/user/State) arr: string[] = []

aboutToAppear(): void {
for (let index = 0; index < 10; index++) {
this.arr.push(“item” + index)
}
}


@Builder
customRefreshComponent() {
Stack() {
Row() {
LoadingProgress().height(32)
Text(“正在刷新…”).fontSize(16).margin({ left: 20 })
}
.alignItems(VerticalAlign.Center)
}.width(“100%”).align(Alignment.Center)
.margin(15)
}


build() {
Column() {
Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {
List() {
ForEach(this.arr, (item: string) => {
ListItem() {
Text(’’ + item)
.width(‘96%’)
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(Color.White)
.margin({top:10})
}.width(“100%”)
}, (item: string) => item)
}
.onScrollIndex((first: number) => {
console.info(first.toString())
})
.width(‘100%’)
.height(‘100%’)
.divider({
strokeWidth: 1,
color: Color.Yellow,
startMargin: 10,
endMargin: 10
})
.scrollBar(BarState.Off)
}
.onStateChange((refreshStatus: RefreshStatus) => {
console.info('Refresh onStatueChange state is ’ + refreshStatus)
})
.onRefreshing(() => {
//模拟网络请求操作
setTimeout(() => {
this.isRefreshing = false
}, 2000)
console.log(‘onRefreshing test’)
})
.backgroundColor(0x89CFF0)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

回到顶部