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
2024-10-17 10:25:24
浏览
收藏 0
回答 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枚举说明

分享
微博
QQ
微信
回复
2024-10-17 15:53:43
相关问题
HarmonyOS Refresh组件嵌套滑动冲突问题
899浏览 • 1回复 待解决
HarmonyOS List+Swipe+web滑动冲突
108浏览 • 1回复 待解决
滑动嵌套事件冲突处理
250浏览 • 0回复 待解决
Scroll内Flex加宽高与滑动冲突
2051浏览 • 1回复 待解决
事件分发冲突问题,如何解决?
383浏览 • 1回复 待解决
Web和List嵌套手势冲突问题
967浏览 • 1回复 待解决
HarmonyOS list滑动问题
779浏览 • 1回复 待解决
HarmonyOS Slider滑动问题
309浏览 • 1回复 待解决
HarmonyOS scroll滑动问题
432浏览 • 1回复 待解决
HarmonyOS 嵌套滑动问题
291浏览 • 1回复 待解决
HarmonyOS list 嵌套web滑动切换问题
453浏览 • 1回复 待解决
ArkTS UI的List和集合List冲突问题
294浏览 • 1回复 待解决
HarmonyOS scroll和list滚动冲突
354浏览 • 1回复 待解决
HarmonyOS Tabs和Web嵌套左右滑动问题
312浏览 • 1回复 待解决
HarmonyOS Grid拖动排序和长按冲突
444浏览 • 2回复 待解决
滑动冲突了。
703浏览 • 1回复 待解决
列表滑动惯性处理问题
247浏览 • 1回复 待解决