HarmonyOS 鸿蒙Next中上架自检提示缺少滑动动效

HarmonyOS 鸿蒙Next中上架自检提示缺少滑动动效 如题,应用自检时检测报告显示:

界面滑动到边界位置时 (上下滑动到顶部或底部,左右滑动到左边界或右边界),应该有反馈动效

页面的可滑动控件上滑到顶部或下滑到底部时缺少回弹动效 相关控件 1、控件序号:[1],控件坐标:[[0.00, 295.00],[1216.00,2565.00]],控件类型:[Swiper]

这个是需要在页面加Swiper组件实现动效吗?有没有官方案例或具体指导,大佬们给指点一下

cke_4400.png

cke_4087.png


更多关于HarmonyOS 鸿蒙Next中上架自检提示缺少滑动动效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

开发者你好,根据上架自检提示,是因为Swiper滑动组件未设置边缘滑动效果。具体可以看下你这边自检是否有相关问题页面。

effectMode(value: EdgeEffect)

设置边缘滑动效果,loop为false或Swiper视窗内一屏显示所有子节点时生效。调用SwiperController.changeIndex()SwiperController.showNext()SwiperController.showPrevious()接口跳转至首尾页时不生效回弹。

更多关于HarmonyOS 鸿蒙Next中上架自检提示缺少滑动动效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个是可选项。试试列表组件打开edgeEffect
.edgeEffect(true),

这个属于体验规范优化的选项。上线审核过不过看情况。 参考:

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(): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
export struct SwiperExample {
  private swiperController: SwiperController = new SwiperController();
  private data: MyDataSource = new MyDataSource([]);
  @State traY: number = 0;
  @State index: number = 0;

  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(400)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
            .translate({
              y: this.traY   // 偏移设置为捕获到的偏移量
            });
        }, (item: string) => item);
      }
      .backgroundColor(Color.Orange)
      .onChange((index: number) => {
        this.index = index;
      })
      .loop(false)
      .vertical(true)
      .effectMode(EdgeEffect.None) // 禁用内置边缘效果
      .parallelGesture(
        PanGesture({ direction: PanDirection.Vertical })
          .onActionUpdate((event) => {
            // 这里控制滑动距离,第一个往下滑
            if (this.index == 0 && event.offsetY < 160) {
              this.traY = event.offsetY;
            }
            // 这里控制滑动距离,最后一个往上滑
            if (this.index == this.data.totalCount() - 1 && event.offsetY > -160) {
              this.traY = event.offsetY;
            }
          })
          .onActionEnd(() => {
            animateToImmediately({
              duration: 100, // 这里可以控制回弹速度
              curve: Curve.EaseOut,
              iterations: 1,
              playMode: PlayMode.Normal,
            }, () => {
              this.traY = 0;
            });
          })
      );
    }.width('100%')
    .margin({ top: 50 });
  }
}

这个不是让你“额外加一个 Swiper 组件”。

而是:

你当前页面里的可滑动组件(这里检测到是 Swiper),在滑动到边界时,没有“边界反馈动效”。

也就是:

回弹
橡皮筋效果
边缘阻尼
overscroll效果

这些系统推荐的滑动反馈没生效。

你截图里:

控件类型:[Swiper]

说明:

问题就是你当前页面里的:

Swiper()

不是缺少组件。

HarmonyOS 自检这里主要检查:

滑到头/尾时
用户有没有“已经到边界”的感知

比如:

  • 微微回弹
  • 阻尼
  • 边缘拉伸
  • spring动画

否则会认为:

缺少反馈动效

最常见原因:

1、关闭了边缘效果

比如:

.edgeEffect(EdgeEffect.None)

或者:

.disableSwipe(true)

之类。

2、Swiper嵌套导致事件被吃掉

尤其:

Navigation
Tabs
Swiper
Scroll
List

多层嵌套。

有时候:

父组件把边界事件吞了

就没有回弹。

3、自定义手势冲突

如果用了:

PanGesture
onTouch

自己处理滑动,

系统默认 spring 效果可能失效。

4、使用了旧版本API行为

HarmonyOS 5 以后:

很多滚动组件默认行为有变化。

有些旧代码:

以前有回弹
升级后没了

很常见。

推荐处理方式(重点)

Swiper 建议显式开启边界效果:

Swiper() {

}
.edgeEffect(EdgeEffect.Spring)

或者:

.edgeEffect(EdgeEffect.Fade)

推荐:

EdgeEffect.Spring

最符合系统规范。

如果是 Scroll/List:

同样:

.edgeEffect(EdgeEffect.Spring)

官方很多示例其实都默认用了:

EdgeEffect.Spring

只是文档没特别强调。

另外一个重点:

如果你是:

Swiper + Tabs

有时候:

.loop(false)

在边界页不会有明显反馈。

可以加:

.cachedCount()

并避免复杂嵌套。

你这个场景建议优先检查:

Swiper()
  .edgeEffect(EdgeEffect.Spring)

很多时候就过自检了。

一句话总结:

自检提示的意思不是让你新增 Swiper,而是你当前页面中的 Swiper 在滑动到边界时缺少系统推荐的回弹/阻尼反馈效果。一般给可滑动组件增加 edgeEffect(EdgeEffect.Spring) 就能解决。

鸿蒙Next上架自检要求应用包含系统原生滑动动效。自检提示缺少滑动动效,原因通常是页面中未使用ArkUI提供的Scroll、List、Swiper等滑动组件,或自定义滑动时未配置swipeTo、animation等属性。请检查滑动区域是否直接使用了系统滑动组件并启用了默认动画。

自检提示针对的是 Swiper 组件边界滑动缺少回弹动效。Swiper 本身是轮播组件,无边缘回弹属性,不满足“滑动到边界需有反馈动效”的设计规范。

解决方案:将 Swiper 替换为 ListScroll 组件,并设置 edgeEffect(EdgeEffect.Spring),即可自动在滑动到顶部/底部或左/右边界时产生回弹效果。

若需保持横向滑动效果,用 List 并设 listDirection(Axis.Horizontal) 即可,示例:

List() {
  ForEach(this.items, (item) => {
    ListItem() {
      // 内容
    }
  })
}
.listDirection(Axis.Horizontal)
.edgeEffect(EdgeEffect.Spring)

纵向同理。List 组件自带边界弹簧动效,无需额外实现。
如果原 Swiper 还带有自动轮播,可额外用 Swiper 实现,但上下/左右滑动的核心区域应使用 List,确保边界反馈动效符合上架检测。

回到顶部