HarmonyOS 鸿蒙Next Stack组件嵌套两个Scroll同时滑动卡顿不流畅问题

发布于 1周前 作者 wuwangju 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Stack组件嵌套两个Scroll同时滑动卡顿不流畅问题
Demo

Stack({ alignContent: Alignment.BottomStart }) {
  Scroll(this.scroller) {
    Column({space: 20}){
      Text("名称1").height(100).backgroundColor(Color.Gray).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
    }.alignItems(HorizontalAlign.Start).backgroundColor(Color.Pink).height(2000)
  }.border({width:5}).borderColor(Color.Pink).width('100%')
  .hitTestBehavior(HitTestMode.Block)
  .onScroll((x: number , y: number) => {
    this.scroller1.scrollTo({
      yOffset: this.scroller.currentOffset().yOffset,
      xOffset: x
    })

  })
  Scroll(this.scroller1) {
    Column({space: 20}){
      Text("名称2").height(100).backgroundColor(Color.Gray).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
    }.alignItems(HorizontalAlign.Start).backgroundColor(Color.Orange).height(2000)
  }.width('20%').border({width:5}).borderColor(Color.Orange).hitTestBehavior(HitTestMode.Transparent)
  .onScroll((x: number , y: number) => {
    this.scroller.scrollTo({
      yOffset: this.scroller1.currentOffset().yOffset,
      xOffset: x
    })

  })
}

//这样子可以实现同步滑动，但是滑动系数很低，手势滑动很慢，有什么方法让它和单组件那样丝滑


更多关于HarmonyOS 鸿蒙Next Stack组件嵌套两个Scroll同时滑动卡顿不流畅问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

以下代码是否符合您的要求

Stack({ alignContent: Alignment.BottomStart }) {
  Scroll(this.scroller) {
    Column({ space: 20 }) {
      Text("名称1").height(100).backgroundColor(Color.Gray).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
    }.alignItems(HorizontalAlign.Start).backgroundColor(Color.Pink).height(2000)
  }
  .border({ width: 5 })
  .borderColor(Color.Pink)
  .width('100%')
  .zIndex(10)
  .onScroll((x: number, y: number) => {
    this.scroller1.scrollTo({
      yOffset: this.scroller.currentOffset().yOffset,
      xOffset: x
    })
  })

  // .hitTestBehavior(HitTestMode.None)
  Scroll(this.scroller1) {
    Column({ space: 20 }) {
      Text("名称2").height(100).backgroundColor(Color.Gray).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
    }.alignItems(HorizontalAlign.Start).backgroundColor(Color.Orange).height(2000)
  }
  .width('20%').border({ width: 5 }).borderColor(Color.Orange)

可以使用一个flag变量进行控制，触摸一个scroll滑动时，另一个scroll的onScroll属性里的scrollTo方法就会被禁用，从而实现类似单组件丝滑效果

@State flag: boolean = true
build() {
  Stack({ alignContent: Alignment.BottomStart }) {
    Scroll(this.scroller) {
      Column({ space: 20 }) {
        Text("名称1").height(100).backgroundColor(Color.Gray).width(190)
        Text("wwer").height(200).width(190)
        Text("123234").height(200).width(190)
        Text("wwer").height(200).width(190)
        Text("123234").height(200).width(190)
        Text("wwer").height(200).width(190)
        Text("123234").height(200).width(190)
        Text("wwer").height(200).width(190)
      }.alignItems(HorizontalAlign.Start).backgroundColor(Color.Pink).height(2000)
    }
    .border({ width: 5 })
    .borderColor(Color.Pink)
    .width('100%')
    .onTouch(() => this.flag = true)
    .onScroll((x: number, y: number) => {
      if (this.flag) {
        this.scroller1.scrollTo({
          yOffset: this.scroller.currentOffset().yOffset,
          xOffset: x
        })
      }
    })

    // .hitTestBehavior(HitTestMode.None)
    Scroll(this.scroller1) {
      Column({ space: 20 }) {
        Text("名称2").height(100).backgroundColor(Color.Gray).width(190)
        Text("wwer").height(200).width(190)
        Text("123234").height(200).width(190)
        Text("wwer").height(200).width(190)
        Text("123234").height(200).width(190)
        Text("wwer").height(200).width(190)
        Text("123234").height(200).width(190)
        Text("wwer").height(200).width(190)
      }.alignItems(HorizontalAlign.Start).backgroundColor(Color.Orange).height(2000)
    }
    .width('20%')
    .border({ width: 5 })
    .borderColor(Color.Orange)
    .onTouch(() => this.flag = false)
    .onScroll((x: number, y: number) => {
      if (!this.flag) {
        this.scroller.scrollTo({
          yOffset: this.scroller1.currentOffset().yOffset,
          xOffset: x
        })
      }
    })
  }
}

更多关于HarmonyOS 鸿蒙Next Stack组件嵌套两个Scroll同时滑动卡顿不流畅问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next Stack组件在嵌套两个Scroll组件时，若遇到同时滑动卡顿不流畅的问题，可能是由于以下原因导致的：

  1. 事件冲突：两个Scroll组件在滑动时可能会产生事件冲突，导致滑动响应不及时或卡顿。

  2. 性能瓶颈：嵌套滚动结构可能增加了渲染和计算负担，尤其是在滚动内容复杂或数据量大的情况下。

  3. 滚动同步问题：两个Scroll组件在滚动时若未能有效同步，可能导致视觉上的卡顿和不流畅。

解决方案可以尝试从以下几个方面入手：

  • 优化事件处理：确保两个Scroll组件的事件处理逻辑清晰，避免事件冲突。
  • 性能优化：减少滚动内容的复杂度，优化渲染逻辑，提升性能。
  • 滚动同步机制：考虑实现两个Scroll组件的滚动同步机制，确保滑动的一致性。

若以上方法仍无法解决问题，可能是系统或组件本身的限制，需要更深入的调查和优化。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部