HarmonyOS 鸿蒙Next API9 List组件相互监听滚动卡顿问题

HarmonyOS 鸿蒙Next API9 List组件相互监听滚动卡顿问题

代码如下,左侧List滚动时,带动右侧List列表一起滚动一样的距离

暂时只给左侧列表加了监听,没给右侧List加监听

问题:实际滑动时,右侧列表并不跟手,且右侧列表的滑动方向一直是上滑状态

大家帮忙看看这种问题应该怎么解决~

@Entry
@Component
struct MainPage {
  private colors: string[] = ['#f58f98', '#faa755', '#224b8f', '#ac6767', '#72baa7', '#867892', '#005344', '#b7ba6b', '#426ab3']
  private scrollerQ: Scroller = new Scroller();
  private scrollerP: Scroller = new Scroller();
  isScrollerPOrScrollerQ = true

  build() {
    Row() {
      List({ scroller: this.scrollerQ }) {
        ForEach(this.colors, (item) => {
          ListItem() {
            Column() {
              Text(item)
            }.width('100%').height(100).justifyContent(FlexAlign.Center).border({ width: 1, style: BorderStyle.Dashed })
          }
        })
      }.width('40%').height('50%')
      .onTouch(() => this.isScrollerPOrScrollerQ = true)
      .onScroll((x, y) => {
        if (this.isScrollerPOrScrollerQ) this.scrollerP.scrollBy(x, y)
      })

      Text().width('20%')

      List({ scroller: this.scrollerP }) {
        ForEach(this.colors, (item) => {
          ListItem() {
            Column() {
              Text(item)
            }.width('100%').height(100).justifyContent(FlexAlign.Center).border({ width: 1, style: BorderStyle.Dashed })
          }
        })
      }.width('40%').height('50%')
    }
  }
}

更多关于HarmonyOS 鸿蒙Next API9 List组件相互监听滚动卡顿问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

Scroll组件和List组件的onScroll事件中的两个参数不同

  • Scroll组件:滚动事件回调, 第一个参数:返回滚动时水平方向偏移量。第二个参数:返回滚动时竖直方向偏移量。
  • List组件:第一个参数:每帧滚动的偏移量,List的内容向上滚动时偏移量为正,向下滚动时偏移量为负。第二个参数:当前滑动状态。

更多关于HarmonyOS 鸿蒙Next API9 List组件相互监听滚动卡顿问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我有一个需求,需要Scroll嵌套一个List使用。发现嵌套后滑动卡顿,不知道什么情况。。

我也遇到了,最后是怎么解决的

onScroll 和 scrollBy 配合着就可以了,

  • 左边列表带动右边列表滑动,右边列表依旧卡顿,

很喜欢HarmonyOS的卡片式设计,信息一目了然,操作也更便捷。

可以看看你的代码吗,

代码内容

这里是你的代码片段。

代码解释

这部分代码的作用是…

有偏差的问题也解决啦,给每个list的滑动效果都设置为None

.edgeEffect(EdgeEffect.None)

修改了onScroll中的参数的顺序,方向对了,但是两个list移动的偏移量不是很准确!

补充一点:不想使用scroll滚动,只能用list来实现互相监听

在HarmonyOS鸿蒙Next API9中,List组件相互监听滚动时出现卡顿问题,可能是由于以下原因导致的:

  1. 频繁的UI更新:当多个List组件相互监听滚动事件时,可能会导致频繁的UI更新,从而引发卡顿。每次滚动事件触发时,系统需要重新渲染相关组件,如果更新频率过高,可能会导致性能瓶颈。

  2. 事件处理逻辑复杂:如果在滚动事件处理逻辑中包含了复杂的计算或操作,可能会导致主线程阻塞,进而引发卡顿。鸿蒙系统的UI渲染和事件处理都在主线程中进行,任何耗时操作都会影响UI的流畅度。

  3. 内存占用过高:如果List组件中包含大量数据或复杂的子组件,可能会导致内存占用过高,进而影响滚动的流畅性。鸿蒙系统对内存管理有较高的要求,过高的内存占用可能会导致系统性能下降。

  4. 布局嵌套过深:如果List组件的布局嵌套过深,可能会导致渲染性能下降。鸿蒙系统在渲染UI时,需要遍历整个布局树,嵌套过深会增加渲染的复杂度,从而引发卡顿。

  5. 硬件性能限制:在某些低端设备上,硬件性能可能无法满足高频率的UI更新和复杂的事件处理需求,从而导致滚动卡顿。

为了解决这些问题,可以考虑优化事件处理逻辑,减少不必要的UI更新,或者使用异步操作来避免阻塞主线程。此外,合理管理内存使用,避免布局嵌套过深,也是提升性能的有效手段。

回到顶部