HarmonyOS 父组件如何禁用子组件的滑动事件

父组件如何禁用子组件的滑动事件,让父组件去消费

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

可参考示例如下:

@Entry
@Component
struct Page2 {
  @State messageArr: string[] = ['1', '2', '3', '4', '5', '6', '7']
  scroller: Scroller = new Scroller()
  @State currentIndex: number = 1

  build() {
    Column() {
      List({ initialIndex: 1, scroller: this.scroller }) {
        ListItem() {
          Column() {
            Text('second floor')
            Button('to index 1').onClick(() => {
              this.scroller.scrollToIndex(1, true, ScrollAlign.CENTER)
            })
          }
        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.Grey)

        ListItem() {
          Column() {
            Row() {
              Text('消息')
            }
            .height(100)
            .width('100%')
            .backgroundColor(Color.Pink)

            List({}) {
              ForEach(this.messageArr, (item: string) => {
                ListItem() {
                  Row() {
                    Text(`message ${item}`)
                  }
                  .width('100%')
                  .height('200vp')
                }
              })
            }
            .divider({ strokeWidth: 2 })
            .backgroundColor('#eee')
            .nestedScroll({
              scrollBackward: NestedScrollMode.SELF_FIRST,
              scrollForward: NestedScrollMode.PARENT_FIRST,
            })
            .padding({
              bottom: 100
            })
            .edgeEffect(EdgeEffect.None)
          }

        }
        .width('100%')
        .height('100%')

      }
      .friction(2)
      .edgeEffect(EdgeEffect.None)
      .scrollSnapAlign(ScrollSnapAlign.CENTER)
      .onScrollFrameBegin((offset, state) => {
        if (state === ScrollState.Fling) {
          return { offsetRemain: 0 }
        }
        return { offsetRemain: offset }
      })
      .onScrollIndex((start, end, center) => {
        this.currentIndex = center
      })
      .onTouch((event: TouchEvent) => {
        let touchObject: TouchObject = event.touches[0]
        if (touchObject.type === TouchType.Up) {
          this.scroller.scrollToIndex(this.currentIndex, true, ScrollAlign.CENTER)
        }
      })

    }
    .height('100%')
    .width('100%')
  }
}

更复杂示例效果可参考:https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/secondfloorloadanimation

分享
微博
QQ
微信
回复
2天前
相关问题
组件事件可以传到组件
686浏览 • 1回复 待解决
组件如何处理组件内点击事件
2769浏览 • 1回复 待解决
组件事件能否到传递组件
2428浏览 • 1回复 待解决
组件调用组件方法
1284浏览 • 1回复 待解决
HarmonyOS 组件超过组件范围
16浏览 • 1回复 待解决
组件调用组件方法
328浏览 • 1回复 待解决
HarmonyOS 组件超出组件宽度
36浏览 • 1回复 待解决
HarmonyOS 组件调用组件方法
12浏览 • 1回复 待解决
HarmonyOS 组件超出组件布局
16浏览 • 1回复 待解决