uni-app HBuilder X 3.2.13-alpha 版本 swiper组件无法正常显示且无法滑动和自动轮播

uni-app HBuilder X 3.2.13-alpha 版本 swiper组件无法正常显示且无法滑动和自动轮播

示例代码：

<view style="margin-top: 100rpx; background-color: #FFFFFF;">  
  <swiper class="swiper" :autoplay="true">  
    <swiper-item>  
      <view class="swiper-item uni-bg-red">A，内容A</view>  
    </swiper-item>  
    <swiper-item>  
      <view class="swiper-item uni-bg-green">B，内容B</view>  
    </swiper-item>  
    <swiper-item>  
      <view class="swiper-item uni-bg-blue">C，内容C</view>  
    </swiper-item>  
  </swiper>  
</view>

操作步骤：

HBuilder X 3.2.13-alpha 版本 下使用 swiper组件

预期结果：

swiper组件能正常显示，自动轮播，左右滑动

实际结果：

无法正常显示内容，出现重叠，无法自动轮播，无法左右滑动

bug描述：

HBuilder X 3.2.13-alpha 版本

swiper组件无法正常显示，且无法滑动和自动轮播，

示例代码：

<view style="margin-top: 100rpx; background-color: #FFFFFF;">  
  <swiper class="swiper" :autoplay="true">  
    <swiper-item>  
      <view class="swiper-item uni-bg-red">A，内容A</view>  
    </swiper-item>  
    <swiper-item>  
      <view class="swiper-item uni-bg-green">B，内容B</view>  
    </swiper-item>  
    <swiper-item>  
      <view class="swiper-item uni-bg-blue">C，内容C</view>  
    </swiper-item>  
  </swiper>  
</view>

如附件中的图所示

  1. swiper-item 内容重叠
  2. 无法自动轮播
  3. 无法左右滑动

Image


更多关于uni-app HBuilder X 3.2.13-alpha 版本 swiper组件无法正常显示且无法滑动和自动轮播的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请查看相关问题：https://ask.dcloud.net.cn/question/134100

更多关于uni-app HBuilder X 3.2.13-alpha 版本 swiper组件无法正常显示且无法滑动和自动轮播的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX3.2.14 已修复

这个问题在HBuilder X 3.2.13-alpha版本中确实存在，是swiper组件的一个已知bug。

主要原因是该alpha版本在swiper组件的样式处理上存在缺陷，导致swiper-item的定位和布局异常。从你提供的截图可以看出，所有swiper-item都叠加在一起，失去了正常的横向排列布局。

临时解决方案：

  1. 降级到稳定版本：建议暂时回退到HBuilder X 3.2.12或更早的稳定版本，这是最直接的解决方法。

  2. 添加强制样式：如果必须使用当前版本，可以尝试给swiper和swiper-item添加明确的样式：

.swiper {
  height: 300rpx; /* 必须设置明确高度 */
  width: 100%;
}
.swiper-item {
  width: 100%;
  height: 100%;
  display: block;
}
回到顶部