HarmonyOS 鸿蒙Next Tabs组件中，如何监听Content组件的滚动距离？或者Swiper组件，监听scroll

HarmonyOS 鸿蒙Next Tabs组件中，如何监听Content组件的滚动距离？或者Swiper组件，监听scroll Tabs组件中，如何监听Content组件的滚动距离？或者Swiper组件，监听滚动的距离，或百分比？

9 回复 
这个问题解决了：（之前看的文档还没有更新API 11）

在API 11上，Tabs组件有一个callback： `onGestureSwipe((index: number, event: TabsAnimationEvent)`，通过这个能知道滚动的距离。 例如： `onGestureSwipe index: 1, event: {"currentOffset":-41.669124603271484,"targetOffset":0,"velocity":0}`

更多关于HarmonyOS 鸿蒙Next Tabs组件中，如何监听Content组件的滚动距离？或者Swiper组件，监听scroll的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


请问你解决了吗？我也遇到了Swiper组件，监听滚动的距离，或百分比的问题了

在API 11上，Tabs组件有一个callback：

onGestureSwipe((index: number, event: TabsAnimationEvent)

通过这个能知道滚动的距离。例如：

onGestureSwipe index: 1, event: {"currentOffset":-41.669124603271484,"targetOffset":0,"velocity":0}

你如果是Swiper组件，就用：onGestureSwipe(event: (index: number, extraInfo: SwiperAnimationEvent) => void) 这个接口，

content中加入一个scroll组件

我是想实现tabs组件中，横向滑动内容时，顶部的tab跟着一起联动，这种交互在Android是很常见的，

那就是滑动事件中控制另一个tabs。

用手滚动的话可以通过onTouch事件，

在HarmonyOS中，监听Tabs组件的Content滚动距离或Swiper组件的滚动事件，可以通过onScroll或onScrollIndexChange等回调函数实现。

  1. 监听Content组件的滚动距离：

    • Tabs组件的Content部分通常是一个可滚动的容器，如ScrollView或List。你可以通过在Content组件上设置onScroll回调来监听滚动距离。
    • 例如，使用ScrollView时，可以通过onScroll事件获取当前的滚动位置：
      <ScrollView onScroll={(event) => { 
  const scrollY = event.nativeEvent.contentOffset.y;
  console.log('Scroll Y:', scrollY);
}}>
  {/* Content here */}
</ScrollView>

  2. 监听Swiper组件的滚动事件：

    • Swiper组件提供了onScrollIndexChange回调，用于监听当前滑动到的页面索引。
    • 你可以在Swiper组件上设置onScrollIndexChange来获取当前页面的索引：
      <Swiper onScrollIndexChange={(index) => {
  console.log('Current Index:', index);
}}>
  {/* Pages here */}
</Swiper>

通过上述方式，你可以监听Tabs组件的Content滚动距离或Swiper组件的滚动事件。

回到顶部