HarmonyOS 鸿蒙Next 滚动控制器的滚动方法触发的 currentOffset 值不一致

HarmonyOS 鸿蒙Next 滚动控制器的滚动方法触发的 currentOffset 值不一致

@Entry @Component struct Index { sc = new Scroller() @State isShow: boolean = false

// 获取随机高度
getRandomNumber() {
    return Math.floor(Math.random() * (300 - 200 + 1)) + 200;
}

// 随机颜色
getRandomColor(): ResourceColor {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgba(${r}, ${g}, ${b}, 0.5)`;
}

@Builder
CustomFooter() {
    Text('尾')
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontSize('30')
}

build() {
    Stack({
        alignContent: Alignment.BottomEnd
    }) {
        WaterFlow({
            footer: this.CustomFooter,
            scroller: this.sc
        }) {
            ForEach(Array.from({
                length: 9
            }), (item: void, index: number) => {
                FlowItem() {
                    Text(index + '')
                        .fontSize(30)
                        .fontWeight(600)
                }
                .height(this.getRandomNumber())
                .backgroundColor(this.getRandomColor())
                .width('100%')
            })
        }
        .columnsTemplate('1fr 1fr')
        .onScroll(() => {
            if (this.sc.currentOffset()
                .yOffset > 100) {
                this.isShow = true
            } else {
                this.isShow = false
            }
        })

        Text('back')
            .padding(20)
            .backgroundColor('#f00')
            .fontColor('#fff')
            .margin({
                right: 20,
                bottom: 20
            })
            .translate({
                x: this.isShow ? '0' : '150%'
            })
            .opacity(this.isShow ? 1 : 0)
            .animation({
                duration: 300
            })
            .onClick(() => {
                this.sc.scrollTo({ // 位置滚动
                    xOffset: 0,
                    yOffset: 0
                })
                console.log(this.sc.currentOffset()
                    .yOffset + '')
            })
    }
    .width('100%')
    .height('100%')
}

}

export default Index


更多关于HarmonyOS 鸿蒙Next 滚动控制器的滚动方法触发的 currentOffset 值不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

我也遇到了currentOffset().yOffset的偏移量为啥和设置的position里面的会不对应不上,像让背景图跟着一块上去,滑动的偏移量总是大于图片的上升速度。

更多关于HarmonyOS 鸿蒙Next 滚动控制器的滚动方法触发的 currentOffset 值不一致的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


文档

[waterflow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-waterflow-0000001774280974)

waterflow没有onScroll方法

嗯,SDK版本不同,

你这个API几啊,我API9,都没有这个.onScroll()属性了。

我看 openharmony API 10 Release 文档有 onScroll 啊,

在HarmonyOS鸿蒙Next中,滚动控制器的滚动方法触发的currentOffset值不一致可能是由于以下原因:

  • 异步更新机制:鸿蒙的UI更新是异步的,滚动过程中currentOffset的更新可能滞后于实际的滚动位置,导致获取的值与预期不符。

  • 滚动事件触发频率:滚动事件的触发频率可能高于currentOffset的更新频率,导致在快速滚动时获取的值不一致。

  • 滚动惯性:在滚动惯性作用下,滚动会持续一段时间,即使手指已经离开屏幕,currentOffset的值仍会变化,可能导致获取的值不一致。

  • 滚动边界处理:滚动到边界时,系统可能会进行弹性回弹处理,这会影响currentOffset的值,使其与预期不一致。

  • 多线程竞争:如果滚动操作和currentOffset的获取操作在不同的线程中执行,可能会出现竞争条件,导致获取的值不一致。

  • 精度问题:currentOffset的值可能是浮点数,由于浮点数精度问题,可能导致获取的值与预期有微小差异。

  • 滚动动画:如果滚动过程中包含动画效果,currentOffset的值可能会受到动画插值的影响,导致获取的值不一致。

  • 系统优化:鸿蒙系统可能对滚动进行优化,如节流或防抖,这可能会影响currentOffset的更新频率和值。

这些问题可能与鸿蒙系统的内部实现和优化策略有关,具体行为可能需要参考鸿蒙的官方文档或源码。

在HarmonyOS鸿蒙Next中,滚动控制器的currentOffset值不一致可能是由于以下原因:

  1. 异步更新:currentOffset可能在滚动过程中异步更新,导致获取的值与实际位置有延迟。
  2. 精度问题:滚动事件可能以不同精度触发,导致currentOffset值在不同事件中略有差异。
  3. 嵌套滚动:如果存在嵌套滚动容器,内部和外部滚动事件可能影响currentOffset的准确性。

建议在回调中处理滚动逻辑时,考虑这些因素,必要时使用onScrollEnd事件确保获取最终稳定的currentOffset值。

回到顶部