HarmonyOS 滑动冲突问题

大概是下面这样的结构实现附件中的功能。Column是自定义的下拉刷新和加载更多组件。

Scroll{  
    Row().height(200)  
    Tabs() {  
      TabContent() {  
          Column(){  
          } .parallelGesture(PanGesture(new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down }))  
      }  
      TabContent() {  
          Column(){  
          } .parallelGesture(PanGesture(new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down }))  
      }  
    }  
}

在Column上滑动的时候，优先让外部的scroll接受竖直方向的滚动事件。当外部不能滚动时，内部Column才能接受滚动事件。这个该怎么处理呢？怎么给Column实现类似List的下面的方法：

.nestedScroll({  
      scrollForward: NestedScrollMode.PARENT_FIRST,  
      scrollBackward: NestedScrollMode.PARENT_FIRST  
    })

HarmonyOS

put_get

2024-10-17 10:25:24

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

可以在Column容器中嵌套Scroll 。

参考demo：

import web_webview from '@kit.ArkWeb';  
@Entry  
@Component  
struct Index {  
  scroller: Scroller = new Scroller();  
  mainController: web_webview.WebviewController = new web_webview.WebviewController();  
  subController: web_webview.WebviewController = new web_webview.WebviewController();  
  tabController: TabsController = new TabsController()  
  @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]  
  @State editFlag: boolean = false  
  build() {  
    Flex({ direction: FlexDirection.Column }) {  
      Scroll(this.scroller) {  
        Column() {  
          Text('外部')  
            .fontSize(44)  
          List({ space: 20, initialIndex: 0 }) {  
            ForEach(this.arr, (item: number, index?: number) => {  
              ListItem() {  
                Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {  
                  Text('' + item)  
                    .width('100%')  
                    .height(80)  
                    .fontSize(20)  
                    .textAlign(TextAlign.Center)  
                    .borderRadius(10)  
                    .backgroundColor(0xFFFFFF)  
                    .flexShrink(1)  
                  if (this.editFlag) {  
                    Button() {  
                      Text("delete").fontSize(16)  
                    }.width('30%').height(40)  
                    .onClick(() => {  
                      if (index != undefined) {  
                        console.info(this.arr[index] + 'Delete')  
                        this.arr.splice(index, 1)  
                        console.info(JSON.stringify(this.arr))  
                        this.editFlag = false  
                      }  
                    }).stateEffect(true)  
                  }  
                }  
              }  
            }, (item: string) => item)  
          }.width('90%')  
          .scrollBar(BarState.Off)  
          .friction(0.6)  
          Column() {  
            Text("分割")  
              .backgroundColor(Color.Brown)  
              .height(40)  
              .width("100%")  
            Tabs({ barPosition: BarPosition.Start, controller: this.tabController }) {  
              TabContent() {  
                Column() {  
                  Text('里面')  
                    .fontSize(44)  
                  Scroll(this.scroller) {  
                    List({ space: 20, initialIndex: 0 }) {  
                      ForEach(this.arr, (item: number, index?: number) => {  
                        ListItem() {  
                          Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {  
                            Text('' + item)  
                              .width('100%')  
                              .height(80)  
                              .fontSize(20)  
                              .textAlign(TextAlign.Center)  
                              .borderRadius(10)  
                              .backgroundColor(0xFFFFFF)  
                              .flexShrink(1)  
                            if (this.editFlag) {  
                              Button() {  
                                Text("delete").fontSize(16)  
                              }.width('30%').height(40)  
                              .onClick(() => {  
                                if (index != undefined) {  
                                  console.info(this.arr[index] + 'Delete')  
                                  this.arr.splice(index, 1)  
                                  console.info(JSON.stringify(this.arr))  
                                  this.editFlag = false  
                                }  
                              }).stateEffect(true)  
                            }  
                          }  
                        }  
                      }, (item: string) => item)  
                    }.width('90%')  
                    .scrollBar(BarState.Off)  
                    .friction(0.6)  
                  } .nestedScroll({  
                    scrollForward: NestedScrollMode.PARENT_FIRST,  
                    scrollBackward: NestedScrollMode.SELF_FIRST  
                  })  
                }  
                  .height("100%")  
              }.tabBar('公告1')  
              TabContent() {  
                Web({  
                  src: 'https://basic.10jqka.com.cn/astockph/briefinfo/notice.html?code=300033&marketid=33',  
                  controller: this.subController  
                })  
                  .nestedScroll({  
                    scrollForward: NestedScrollMode.PARENT_FIRST,  
                    scrollBackward: NestedScrollMode.PARENT_FIRST  
                  })  
                  .height("100%")  
              }.tabBar('公告2')  
            }  
            .vertical(false)  
            .scrollable(true)  
            .barMode(BarMode.Scrollable)  
            .barHeight(40)  
            .height("100%")  
          }  
          .height("100%")  
        }  
      }  
    }  
    .height('100%')  
  }  
}

可以看一下NestedScrollMode。进行不同的组合。在上划和下划的时候进行不同的设置。

SELF_ONLY 只自身滚动，不与父组件联动。

SELF_FIRST 自身先滚动，自身滚动到边缘以后父组件滚动。

父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则子组件触发边缘效果。PARENT_FIRST 父组件先滚动，父组件滚动到边缘以后自身滚动。自身滚动到边缘后，如果有边缘效果，会触发自身的边缘效果，否则触发父组件的边缘效果。

PARALLEL 自身和父组件同时滚动，自身和父组件都到达边缘以后，如果自身有边缘效果，则自身触发边缘效果，否则父组件触发边缘效果。

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#nestedscrollmode10枚举说明

2024-10-17 15:53:43

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 滑动冲突问题

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