uni-app 单页面多 Swiper 动态切换导致内容显示异常

uni-app 单页面多 Swiper 动态切换导致内容显示异常

开发环境 版本号 项目创建方式
Mac 10.14.6 HBuilderX

操作步骤：

  • 2 个 swiper 用 v-if 控制切换
  • 滑动其中任意一个后, 切换到另一个
  • 补充: 2 个 swiper 处在大致相同的位置才能触发

预期结果：

  • 2 个 swiper 都显示正常

实际结果：

  • 2 个 swiper 都显示异常

bug描述：

  • 2 个 swiper 通过 boolean 变量和 v-if 控制显示
  • 当 2 个 swiper 都不滑动时切换显示, 无问题
  • 当滑动其中任意一个后切换到另一个, 另一个就显示异常了
  • 补充: 2 个 swiper 处在大致相同的位置才能触发

更多关于uni-app 单页面多 Swiper 动态切换导致内容显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 单页面多 Swiper 动态切换导致内容显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于 Swiper 组件在动态切换时内部状态未正确重置导致的。当两个 Swiper 组件通过 v-if 切换且位置重叠时，滑动操作会干扰彼此的渲染状态。

解决方案：

  1. 使用 key 强制重新渲染
<swiper v-if="showSwiper1" :key="'swiper1'">
  <!-- swiper1 content -->
</swiper>
<swiper v-if="showSwiper2" :key="'swiper2'">  
  <!-- swiper2 content -->
</swiper>
  1. 使用 v-show 替代 v-if
<swiper v-show="showSwiper1">
  <!-- swiper1 content -->
</swiper>
<swiper v-show="showSwiper2">
  <!-- swiper2 content -->
</swiper>
回到顶部