HarmonyOS List嵌套Refresh组件，Refresh中还是一个List列表，滑动冲突问题？

Question

实现一个列表页，当前页面最外层是个List，List中包含Header和内层List，内层List需要实现下拉刷新和加载更多，因此我内层List外面使用了Refresh组件。采用这种嵌套，我实现了下拉刷新，但我的页面无法向上滑动了，感觉是内外两层List滑动产生了滑动冲突。我需要怎么设置，使列表可以滑动

上述结构大体如下，这种组件布局只能下拉刷新，页面无法上滑。

List{){
  ListItem(){
    //header
  }
  ListItem(){
    // 这个为自定义的内部List
    InnerList()
  }
}

  InnerList{
    build(){
      Refresh(){
        List(){
          LazyForEach(){
            //自己的列表
          }
        }
      }
    }
  }

Answer 1

参考示例：

@Entry
@Component
struct scroll {
  @State fakeDataSource: string[] = [
    'start',
    'aaa', 'bbb', 'ccc', 'ddd', 'eee',
    'aaa11', 'bbb', 'ccc', 'ddd', 'eee11',
    'aaa22', 'bbb', 'ccc', 'ddd', 'eee22',
    'aaa33', 'bbb', 'ccc', 'ddd', 'eee33',
    'aaa44', 'bbb', 'ccc', 'ddd', 'eee44',
    'end'
  ]
  @State waiData: string[] = [
    '外1','外2','外3','外4'
  ]
  @State refreshing: boolean = false
  refresh() {
    setTimeout(() => {
      this.fakeUpdateData()
      this.refreshing = false
    }, 1000)
  }

  private flag = false
  fakeUpdateData() {
    if (this.flag) {
      this.fakeDataSource = [
        'start',
        'aaa', 'bbb', 'ccc', 'ddd', 'eee',
        'aaa11', 'bbb', 'ccc', 'ddd', 'eee11',
        'aaa22', 'bbb', 'ccc', 'ddd', 'eee22',
        'aaa33', 'bbb', 'ccc', 'ddd', 'eee33',
        'aaa44', 'bbb', 'ccc', 'ddd', 'eee44',
        'end'
      ]
    } else {
      this.fakeDataSource = [
        'start',
        'aaa', 'bbb', 'ccc', 'ddd', 'eee','1111','22222',
        '33333','44444','55555','66666','77777','8888','99999',
        '10','11','12','13','14','15','16','17','18','19',
        'end'
      ]
    }
    this.flag = !this.flag
  }

  build() {
    Column() {
      Scroll() {
        Column() {
          List(){
            //header
            ListItem(){
              Row(){
                Text('header')
                  .width('100%')
                  .height('10%')
              }
              .height(100)
              .backgroundColor(Color.Red)
            }
            //自定义的内部List
            ListItem(){
              Refresh({ refreshing: $$this.refreshing }) {
                List() {
                  ForEach(this.fakeDataSource, (value: string) => {
                    ListItem() {
                      Text(value)
                        .width('100%')
                        .height(50)
                        .backgroundColor(Color.White)
                    }
                  })
                }
                .scrollBar(BarState.Off)
                .nestedScroll({
                  scrollForward: NestedScrollMode.PARENT_FIRST,
                  scrollBackward: NestedScrollMode.SELF_FIRST
                })
                // list组件在小于一屏的时候是会让手势失效，需加上底下这一行代码
                .edgeEffect(EdgeEffect.None, { alwaysEnabled: true })
                .divider({ strokeWidth: 1 })
                .height('90%')
              }
              .backgroundColor(0x110000ff)
              .onRefreshing(() => {
                this.refresh()
              })
            }

          }
          .scrollBar(BarState.Off)
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST,
            scrollBackward: NestedScrollMode.SELF_FIRST
          })
          // list组件在小于一屏的时候是会让手势失效，需加上底下这一行代码
          .edgeEffect(EdgeEffect.None, { alwaysEnabled: true })
          .divider({ strokeWidth: 1 })
          .height('100%')

        }
        .width('100%')
        .height('100%')
      }
      .layoutWeight(1)
      .scrollBar(BarState.Off)
      .backgroundColor(0x11000000)
    }

  }
}