uni-app swiper-item重叠

uni-app swiper-item重叠

操作步骤：

如上代码

预期结果：

正常轮播

实际结果：

swiper-item重叠无法轮播

bug描述：

h5、 app端vue页面都存在该问题

4 回复

app一样重叠

更多关于uni-app swiper-item重叠的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请查看 解决方案

3.2.14 已修复

在 uni-app 中，swiper-item 出现重叠通常是由于样式或结构问题导致的。请检查以下几点：

  1. 确保 swiper 和 swiper-item 的样式正确：

    • swiper 需要设置明确的宽度和高度，例如：
      swiper {
  width: 100%;
  height: 300px;
}
    • swiper-item 应占满 swiper 的容器，例如：
      swiper-item {
  width: 100%;
  height: 100%;
}

  2. 检查 swiper-item 的内容：

    • 如果 swiper-item 内包含图片或自定义组件，确保内容尺寸未超出容器或影响布局。

  3. 避免嵌套或样式冲突：

    • 确保没有全局样式（如 flex、float）影响 swiper 或 swiper-item 的布局。

  4. 使用 current 属性控制轮播：

    • 如果通过 current 绑定动态数据，确保数据更新时视图同步。

示例修正代码：

<template>
  <swiper :style="{ height: '300px' }" :current="currentIndex">
    <swiper-item v-for="(item, index) in list" :key="index">
      <view class="item-content">{{ item }}</view>
    </swiper-item>
  </swiper>
</template>

<style>
swiper {
  width: 100%;
}
.item-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
回到顶部