Refresh:下拉刷新容器
Refresh(value: {refreshing: boolean, offset?: Length, friction?: number})
refreshing:当前组件是否正在刷新
offset:刷新组件静止时距离父组件顶部的距离(默认16)
friction:下拉摩擦系数,取值范围为0到100(默认62)
0表示下拉刷新容器不跟随手势下拉而下拉
100表示下拉刷新容器紧紧跟随手势下拉而下拉
数值越大,下拉刷新容器跟随手势下拉的反应越灵敏
事件:
onStateChange(callback: (state: RefreshStatus) => void) 当前刷新状态变更时,触发回调。
state:刷新状态
Inactive:默认未下拉状态
Drag:下拉中,下拉距离小于刷新距离
OverDrag:下拉中,下拉距离超过刷新距离
Refresh:下拉结束,回弹至刷新距离,进入刷新状态
Done:刷新结束,返回初始状态(顶部)
onRefreshing(callback: () => void) 进入刷新状态时触发回调
效果如图:

代码:
- @Entry
- @Component
- struct RefreshPage {
- @State isRefreshing: boolean = false
- @State counter: number = 0
-
- build() {
- Column() {
- Refresh({ refreshing: this.isRefreshing, offset: 120, friction: 100 }) {
- Text('pull down and refresh:' + this.counter).fontSize(30).margin(10)
- }.onStateChange((refreshStatus: RefreshStatus) => {
- console.info('Refresh onStatueChange state is ' + refreshStatus.toString())
- }).onRefreshing(() => {
- setTimeout(() => {
- this.counter++
- this.isRefreshing = false
- }, 1000)
- console.log('onRefreshing test')
- })
-
- }
- .width('100%')
- .height('100%')
- }
- }