uni-app 安卓上swiper显示异常

uni-app 安卓上swiper显示异常

操作步骤：

1、app完全关掉
2、进入app

预期结果：

swiper显示第一个

实际结果：

swiper显示最后一个

bug描述：

swiper在轮播图场景中，默认进入页面应该显示第一个swiper-item的，但是有时候直接跳到最后一个swiper-item了。
如图，正常显示下标应该是0，但是显示的是3（最后一个），具体操作请看视频

图片

Image 1
Image 2

视频

222.mp4_.zip


更多关于uni-app 安卓上swiper显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

你应该是开了轮播吧 关闭试试

更多关于uni-app 安卓上swiper显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有填autoplay属性

回复 YXW: 我看下标和实际效果是对应的。实现项目测试没有复现你说的问题 可能是逻辑上哪里导致的

回复 DCloud_Android_ST: 下标和显示是对应的，这个没问题，但是一进来不应该显示第一个swiper-item吗，您没看我上传的视频附件吗？

回复 YXW: 你这个问题是必现的吗 如果是可以提供项目demo我们这边测试下。因为我们这边没有复现问题。猜测是你的逻辑代码问题导致的

回复 DCloud_Android_ST: 不是必现，我上传的视频您没看吗，是偶尔进去才会复现，我把circular属性删了就没这问题了，难道跟circular有关？

回复 YXW: 设置下current再试试

回复 DCloud_Android_ST: 没用

回复 DCloud_Android_ST: 代码我发到评论里了，您看看，逻辑代码根本就没有问题，如果有问题，ios不也有问题吗？现在只是安卓有这个问题

回复 YXW: 出个完整点能运行的示例。我这边复现看看

代码

代码

这是一个已知的 uni-app 在 Android 平台上的 swiper 组件渲染时序问题。当页面初始化时，如果 swiper 的 current 值绑定到动态数据，且数据在组件渲染后（例如在 onLoad 生命周期中）才被赋值，Android 端可能出现渲染异常，导致初始显示项错乱。

核心原因：在 Android 上，swiper 组件在初始渲染时，如果其绑定的 current 值在数据加载完成后发生变更，可能触发内部渲染逻辑错误，导致直接跳转到最后一个 item。

解决方案（任选其一）：

  1. 使用 v-if 控制渲染时机：在 swiper 外层添加 v-if="dataLoaded"，确保数据完全加载后再渲染 swiper 组件。

    <template>
  <view>
    <swiper v-if="list.length > 0" :current="currentIndex">
      <swiper-item v-for="(item, index) in list" :key="index">
        <!-- 内容 -->
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      currentIndex: 0
    };
  },
  onLoad() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.list = [/* 你的数据 */];
    }, 100);
  }
};
</script>

  2. 使用 nextTick 延迟设置 current：在数据加载完成后，通过 $nextTick 在下一次 DOM 更新循环中再设置 current 值。

    <script>
export default {
  data() {
    return {
      list: [],
      currentIndex: 0
    };
  },
  onLoad() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.list = [/* 你的数据 */];
      this.$nextTick(() => {
        this.currentIndex = 0; // 确保 DOM 更新后再设置
      });
    }, 100);
  }
};
</script>
回到顶部