openharmony容器组件之Refresh

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%')
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值