HarmonyOS 鸿蒙Next 蒙友们分享一个好看的【下拉刷新上拉加载更多】组件
HarmonyOS 鸿蒙Next 蒙友们分享一个好看的【下拉刷新上拉加载更多】组件
List(){}
.onScrollIndex((start: number, end: number, center: number) => {
console.info('start:'+start+', center:'+center+', end:'+end)
})
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
onScrollIndex(event: (start: number, end: number, center: number) => void)
有子组件划入或划出List显示区域时触发。计算索引值时,ListItemGroup作为一个整体占一个索引值,不计算ListItemGroup内部ListItem的索引值。
List的边缘效果为弹簧效果时,在List划动到边缘继续划动和松手回弹过程不会触发onScrollIndex事件。
触发该事件的条件:列表初始化时会触发一次,List显示区域内第一个子组件的索引值或最后一个子组件的索引值有变化时会触发。
从API version 10开始,List显示区域中间位置子组件变化时也会触发该事件
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-refresh-V5
如果要使用三方库,请参考:
在HarmonyOS鸿蒙Next中,实现一个既美观又实用的“下拉刷新上拉加载更多”组件,可以通过以下方式实现:
首先,使用Refresh组件包裹内容区域。该组件支持下拉刷新功能,通过监听onRefresh事件,当用户下拉时触发该事件,执行刷新逻辑(如重新加载数据)。
其次,在内容区域底部设置一个加载提示,并监听滚动到底部的事件(可以通过监听滚动位置与列表总高度实现)。当检测到滚动到底部时,触发加载更多数据的逻辑。
此外,利用ArkTS的样式系统(类似CSS的语法)来自定义Refresh组件及其子组件的样式。通过设置style属性,可以自定义刷新指示器的颜色、大小等,以及加载提示的外观,以满足不同的审美和功能需求。
在开发过程中,可以根据业务逻辑和UI需求进行进一步的调整和优化。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html 。