OpenHarmony开发者论坛

标题: Navigation、Refresh、Scroll 联用时发现的问题 [打印本页]

作者: natane 时间: 2024-2-26 17:11
标题: Navigation、Refresh、Scroll 联用时发现的问题
[md]联用Navigation Refresh Scroll中发现的问题

Navigation `hideTitleBar`属性为`true`条件下:

1. Navigation 属性`titleMode` 为 `NavigationTitleMode.Free` 或 `NavigationTitleMode.Full` 时 Refresh无法进行拖动下拉刷新，拖动下拉时会滚动条会抖动，快速下拉才会触发下拉刷新；
2. Navigation 属性`titleMode` 为 `NavigationTitleMode.Mini` 时 Refresh可下拉，但Scroll 只能向下滚动，无法向上滚动，向上滚动会直接触发Refresh下拉刷新，不会等到Scroll滚动条到最上方时才触发;

Navigation `hideTitleBar`属性为`false`条件下，不会出现以上情况

源码如下：

```
@Entry
@Component
struct Index {
  @State counter: number = 0
  @State isRefreshing: boolean = false
  @State mOffset: number = 0
  @State mFriction: number = 62
  private dataArray: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]

  @Builder
  refreshBuilder() {
Column() {
   Text('刷新中')
      .fontSize(16)
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.padding(16)
.borderRadius(12)
  }

  build() {
Column() {
   Navigation() {
      Column() {
      Refresh({
         refreshing: $$this.isRefreshing,
         offset: this.mOffset,
         friction: this.mFriction,
         builder: this.refreshBuilder
      }) {
         Scroll() {
            Column() {
            ForEach(this.dataArray, (item: number) => {
               Stack() {
                  Text((item + this.counter).toString())
                  .fontSize(20)
               }.width('100%')
               .height(60)
               .backgroundColor(Color.White)
               .borderRadius(10)
            })
            }.width('100%')
         }.width('100%')
         .height('100%')
      }
      .width('100%')
      .height('100%')
      .onRefreshing(() => {
         setTimeout(() => {
            this.counter++
            this.isRefreshing = false
         }, 1000)
      })
      }
      .height('100%')
      .width('100%')
   }
   .height('100%')
   .width('100%')
   .toolbarConfiguration([{ value: '测试' }])
   .hideTitleBar(true)
}
.height('100%')
.width('100%')
  }
}
```

[/md]

作者: 深开鸿_王石 时间: 2024-2-27 10:54
其实能拉出来，但是和offset和fiction有关，给scroll加个.edgeEffect(EdgeEffect.Spring)会比较明显

作者: natane 时间: 2024-2-27 17:13
回复 深开鸿_王石: 那这个拉的是scroll的吧，Refresh拉不出来

作者: 深开鸿_王石 时间: 2024-2-28 17:38
回复 natane: 我用4.0是能看到的，就是拉的距离较大

作者: natane 时间: 2024-2-29 14:21
回复 深开鸿_王石: 同是4.0，安装后拉的话就只能拉动Scroll。Refresh只能快速下拉才能触发

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)