RN ScrollView简单实现无限轮播

最新推荐文章于 2024-02-01 11:28:34 发布

iOSTianNan

最新推荐文章于 2024-02-01 11:28:34 发布

阅读量369

点赞数 1

分类专栏： JavaScript react-native 文章标签：动画 javascript 前端

本文链接：https://blog.csdn.net/iOSTianNan/article/details/126957935

版权

react-native 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

34 篇文章 0 订阅

订阅专栏

在这里插入图片描述
如上图所示, 需要实现一个简单的上翻轮播图, 展示最新的三条数据

错误思路

        onScroll={(event: any) => {
          if (!this.state.autoPlay) return;
          let y: any = event?.nativeEvent?.contentOffset.y
}}

以上方案通过y的滚动只 y%固定高度来获取index ,这种方案的缺陷在于依赖y
y在滚动结束实际返回中会存在
30.12
60.21这种误差, 求余数的结果就非常不准确

简单方案 – 延时+递归+判断下标


  private setTimeAwait() {
    return new Promise((resolve) => {
      let time: any = setTimeout(() => {
        clearTimeout(time)
        time = null;
        resolve();
      }, this.delayTime)
    })
  }


  private async startScrollAnimated() {
    await this.setTimeAwait();

    if (this.fastNewsScrollIndex == 2) {
      this.fastNewsScrollIndex = 0
    } else {
      this.fastNewsScrollIndex += 1
    }
    this.doLoop();
  }

  private doLoop() {
    this?.loopScroll?.scrollTo({
      x: 0,
      y: this.fastNewsItemH * this.fastNewsScrollIndex,
      animated: this.fastNewsScrollIndex !== 0
    })
    this.startScrollAnimated();
  }