HarmonyOS鸿蒙Next中如何对tab的滑动手势距离进行限制

HarmonyOS鸿蒙Next中如何对tab的滑动手势距离进行限制

结合一个普通自定义的tabbar ,滑动起来特别,可不可以做一些阻尼,摩擦之类的滑动限制呢?

这里轻轻一滑就翻页了

9 回复
  1. 楼主可以参考onContentWillScroll和对手势进行拦截处理
    示例：示例是拦截翻译 你可以结合滚动距离来处理
    onContentDidScroll可以获取滚动的距离，也可以结合手势获取到手势的起点
// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = [];

  constructor(list: number[]) {
    this.list = list;
  }

  totalCount(): number {
    return this.list.length;
  }

  getData(index: number): number {
    return this.list[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController();
  private data: MyDataSource = new MyDataSource([]);
  private currentIndex: number = 4;

  aboutToAppear(): void {
    let list: number[] = [];
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list);
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .index(this.currentIndex)
      .loop(false)
      .onChange((index: number) => {
        this.currentIndex = index;
      })
      .onContentWillScroll((result: SwiperContentWillScrollResult) => {
        if (result.comingIndex > this.currentIndex) {
          return false;
        }
        return true;
      })

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {
            this.swiperController.showNext();
          })
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious();
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}
  1. 加遮盖层拦截遮盖层的滑动手势

更多关于HarmonyOS鸿蒙Next中如何对tab的滑动手势距离进行限制的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Tabs({

barPosition: BarPosition.End, index: this.selectedIndex, controller: this.controller }) { ForEach(this.tabInfos, (item: TabBarInfo, i: number) => { TabContent() { // 各页面内容… } // 为特定Tab添加手势限制 .gesture( i === 0 ? PanGesture(new PanGestureOptions({ direction: PanDirection.Right, distance: 50 })) : i === this.tabInfos.length-1 ? PanGesture(new PanGestureOptions({ direction: PanDirection.Left, distance: 50 })) : null ) }) } .vertical(false) .scrollable(true)

在边缘TabContent添加方向限制手势：

PanGestureOptions({ direction: PanDirection.Right }) // 左边缘禁止右滑

PanGestureOptions({ direction: PanDirection.Left }) // 右边缘禁止左滑

PanGestureOptions({ distance: 50 }) // 设置最小触发滑动距离（单位vp）

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

设置 distance 360了 也不起作用啊 大佬🤣，

期待HarmonyOS能在未来带来更多创新的技术和理念。

.onGestureSwipe((index: number) => { // 控制滑动阈值，例如只允许在特定条件下切换 const threshold = 0.3; // 设置滑动阈值 if (Math.abs(index - this.selectedIndex) < threshold) { // 如果滑动距离小于阈值，则不切换页面 return; } // 可以根据index值决定是否允许切换到目标页面 }) 这样试试

这个index 只会使 0 1 2 3之类的这样互相拿到得值 和0.3这个阈值没有关联吧 😂，

在HarmonyOS Next中，可以通过TabController的onGestureSwipe回调配合Gesture组件实现滑动手势距离限制。使用PanGesture的distance属性控制滑动阈值，示例代码：

TabController({
  onGestureSwipe: (event: GestureEvent) => {
    if (Math.abs(event.offsetX) > 100) { // 限制横向滑动距离100vp
      return false; // 阻止滑动
    }
    return true;
  }
})

需在Tab组件外层包裹Gesture组件并配置PanGestureOptions的distance参数。具体数值需根据实际场景调整。

在HarmonyOS Next中，可以通过以下方式对Tabs的滑动手势进行阻尼控制：

  1. 使用onGestureSwipe事件监听手势滑动距离，并返回false来阻止默认滑动行为：
.onGestureSwipe((offset: number, event: GestureEvent) => {
  // 当滑动距离小于100时阻止切换
  if(Math.abs(offset) < 100) {
    return false; 
  }
  return true;
})
  1. 结合animationDuration调整动画时长来模拟阻尼效果：
.animationDuration(500) // 增加动画时长
  1. 或者使用Scroll组件包裹Tabs来实现更精确的控制：
Scroll(this.scroller) {
  Tabs({...})
}
.scrollable(false) // 禁用Tabs自带滚动
.onScrollEdge((side: Edge) => {
  // 边界滚动处理
})
  1. 也可以通过修改Tabs的scrollable属性为false完全禁用滑动，改用点击切换：
.scrollable(false)

这些方法可以根据实际需求组合使用，建议优先使用onGestureSwipe事件来实现滑动距离阈值控制。

回到顶部