HarmonyOS 无限滑动的广告模块

如何实现一个无限滑动的广告模块,swiper好像没有办法实现。

HarmonyOS
2025-01-09 16:34:16
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

用组件加手势加动画去实现,参考示例如下:

//资源图片放在 ${project.dir}\entry\src\main\resources\rawfile\img 目录下
// page.ets
import curves from '@ohos.curves';

@Preview
@Entry
@Component
struct StackDemo {
  @State message: string = 'Hello World'
  @State list: Array<Slide> = [
    new Slide("1", "img/ic_banner01.png"),
    new Slide("2", "img/ic_banner02.png"),
    new Slide("3", "img/ic_banner03.png"),
  ]
  @State aheadIndex: number = 0;
  @State offsetX: number | string = 0;

  build() {
    Row() {
      Stack() {
        ForEach(this.list, (item: Slide, index: number) => {
          Row() {
            Image($rawfile(item.src))
              .scale({ x: this.getScale(index), y: this.getScale(index), centerX: 0 })
          }
          .offset({ x: this.getOffsetX(index), y: 0 })
          .zIndex(this.getZIndex(index))
        }, (item: Slide) => item.id)
      }
      .width("100%")
      .gesture(
        PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
          .onActionUpdate((event?: GestureEvent) => {
            this.handlePanGestureUpdate(event?.offsetX);
          })
          .onActionEnd((event?: GestureEvent) => {
            this.handlePanGestureEnd(event?.offsetX);
          })
      )
    }
    .height("20%")
    .padding({ top: 5, left: 5, right: 5 })
  }

  getRealIndex(index: number): number {
    if (index < this.aheadIndex) {
      return (this.list.length - 1) - this.aheadIndex + (this.aheadIndex - index);
    }
    return index - this.aheadIndex;
  }

  getScale(index: number): number {
    let width = 1 - (this.getRealIndex(index) + 1) * 0.05;
    return width;
  }

  getOffsetX(index: number): number | string {
    let realIndex = this.getRealIndex(index);
    if (index == this.aheadIndex) {
      return this.offsetX;
    }
    return realIndex * 25;
  }

  getZIndex(index: number): number {
    console.log(`zIndex:${this.aheadIndex}`)
    return -this.getRealIndex(index);
  }

  handlePanGestureUpdate(offsetX?: number): void {
    if (!offsetX || offsetX > 0) {
      return;
    }
    console.log(`Update offsetX:${offsetX}`)
    animateTo({ curve: curves.springMotion() }, () => {
      this.offsetX = offsetX!;
    })
  }

  handlePanGestureEnd(offsetX?: number): void {
    if (!offsetX) {
      return;
    }
    console.log(`End offsetX:${offsetX}`)
    if (offsetX < -180) {
      animateTo({ curve: curves.springMotion() }, () => {
        this.offsetX = "-100%";
      })
      setTimeout(() => {
        console.log("swipe next")
        this.aheadIndex = this.aheadIndex == this.list.length - 1 ? 0 : this.aheadIndex + 1;
        this.offsetX = 0;
      }, 400)
    } else {
      animateTo({ curve: curves.springCurve(10, 1, 228, 30) }, () => {
        this.offsetX = 0;
      })
    }
  }
}
// model.ets
export class Slide {
  id: string;
  src: string;

  constructor(id: string, src: string) {
    this.id = id;
    this.src = src;
  }
}
分享
微博
QQ
微信
回复
2025-01-09 19:43:56
相关问题
实现层叠广告滑动效果
1254浏览 • 1回复 待解决
harmonyOS SDK 原生广告问题
596浏览 • 0回复 待解决
HarmonyOS 无限循环banner效果
323浏览 • 1回复 待解决
HarmonyOS 如何停止无限旋转中动画
252浏览 • 1回复 待解决
当前HarmonyOS是否有开屏广告能力
864浏览 • 1回复 待解决
HarmonyOS 广告接入报错:21800003
895浏览 • 1回复 待解决
HarmonyOS Next广告服务如何对接
486浏览 • 1回复 待解决
HarmonyOS 启动页广告跳转问题
529浏览 • 1回复 待解决
关于无限步骤数据库表设计
2135浏览 • 1回复 待解决
HarmonyOS 要做一个可以无限滚动list
1105浏览 • 1回复 待解决
接入广告显示白屏问题
780浏览 • 1回复 待解决
如何申请广告跟踪权限
871浏览 • 1回复 待解决
如何展示一个原生广告
631浏览 • 1回复 待解决
如何展示一个贴片广告
709浏览 • 1回复 待解决