HarmonyOS 可滑动组件嵌套后内部的可滑动组件无法监听滑动

当前需要有一个全局的瀑布流组件放在其它page中，其它page需要整体滑动，所以只能嵌套使用但是瀑布流组件无法监听滑动，如何能够在不影响外部list的情况下只对嵌套内容进行滑动监听？

@Entry
@Component
export default struct scrollTestPage {
  dataList = [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]
  dataList2 = [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]
  dataList3 = [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]

  build() {
    List() {
      ForEach(this.dataList, (item: number, position: number) => {
        ListItem() {
          Text(item.toString()).width("100%").height(44).textAlign(TextAlign.Center)
        }
      }, (item: number, position: number) => {
        return item + "_" + position
      })
      ListItem() {
        WaterFlow() {
          ForEach(this.dataList2, (item: number, position: number) => {
            FlowItem() {
              Text(item.toString()).layoutWeight(1).height(44).textAlign(TextAlign.Center)
            }
          })
        }.onDidScroll((data) => {
          console.error("waterFlow scroll")
        })
      }
      
      ListItem() {
        List() {
          ForEach(this.dataList2, (item: number, position: number) => {
            ListItem() {
              Text(item.toString()).layoutWeight(1).height(44).textAlign(TextAlign.Center)
            }
          })
        }.onDidScroll((data) => {
          console.error("childList scroll")
        })
      }

    }.onDidScroll((data) => {
      console.error("list scroll")
    })
  }
}

HarmonyOS

FengTianYa

2024-12-25 12:23:24

浏览

回答 1

待解决

回答 1

按赞同

按时间

aquaa

可根据以下步骤：

1、使用refresh组件，将refresh组件作为父组件嵌套div，这样可以实现滑动展示。配合list、list-item一起使用，确保内容能够正确滑动。

2、设置相关属性，将refresh组件的高度设置为固定值以避免内容被压缩。将父组件的高度设置为固定值，以确保外部列表的高度不会被压缩。

3、控制触摸事件，对子列表组件的scrollbottom事件进行控制，当子列表组件滑动至末尾时，将父组件的scrollable属性设置为false，使得父列表无法滑动。同时为了保证用户触摸子列表之外其他区域时，可以正常滑动父列表，需要在子列表之外其他区域的组件上对touchstart事件进行控制，将父组件的scrollable属性设置为true。

参考示例：

@Entry
@Component
struct scroll {
  @State fakeDataSource: string[] = [
    'start',
    '123', '124', '125', '126', '127',
    '128', '129', '130', '131', '132',
    '1234', '1235', '1236', '1237', '1238',
    '1239', '1240', '1241', '1242', '1243',
    'end'
  ]
  @State refreshing: boolean = false
  refresh() {
    setTimeout(() => {
      this.fakeUpdateData()
      this.refreshing = false
    }, 1000)
  }

  private flag = false
  fakeUpdateData() {
    if (this.flag) {
      this.fakeDataSource = [
        'start',
        '123', '124', '125', '126', '127',
        '128', '129', '130', '131', '132',
        '1234', '1235', '1236', '1237', '1238',
        '1239', '1240', '1241', '1242', '1243',
        'end'
      ]
    } else {
      this.fakeDataSource = [
        'start',
        'abc', 'abd', 'abf', 'ddd', 'eee',
        'end'
      ]
    }
    this.flag = !this.flag
  }

  build() {
    Column() {
      Scroll() {
        Column() {
          Blank()
            .width('100%')
            .height(150).backgroundColor(0x33ff0000)
          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(790)
          }
          .backgroundColor(0x110000ff)
          .onRefreshing(() => {
            this.refresh()
          })
        }
      }
      .layoutWeight(1)
      .scrollBar(BarState.Off)
      .backgroundColor(0x11000000)
    }
  }
}

2024-12-25 16:09:22

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 可滑动组件嵌套后内部的可滑动组件无法监听滑动

订阅鸿蒙技术特刊，精选内容抢先看