在uni-app下，当swiper嵌套在view中时，设置swiper宽度有效，但swiper-item或在swiper-item中的view的宽度无效

在uni-app下，当swiper嵌套在view中时，设置swiper宽度有效，但swiper-item或在swiper-item中的view的宽度无效

开发环境 版本号 项目创建方式
Windows WIN11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：Android

手机系统版本号：Android 15

手机厂商：华为

手机机型：note13

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

看描述

操作步骤：

看描述

预期结果：

有效果

实际结果：

没效果

bug描述：

在uniappx下，当swiper嵌套在view中时，设置swiper宽度有效，但swiper-item或在swiper-item中的view的宽度无效，但swiper组件不嵌套在view时，所有宽度设置正常


更多关于在uni-app下，当swiper嵌套在view中时，设置swiper宽度有效，但swiper-item或在swiper-item中的view的宽度无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

uni-app x的issues，请在hx的帮助菜单、报bug中提交，并附上重现示例

更多关于在uni-app下，当swiper嵌套在view中时，设置swiper宽度有效，但swiper-item或在swiper-item中的view的宽度无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的uni-app布局问题，主要原因是swiper-item的默认样式和嵌套层级影响了宽度设置。以下是解决方案：

  1. 对于swiper-item宽度问题，需要给swiper-item设置display:inline-block样式：
.swiper-item {
  display: inline-block;
  width: 100%;
}
  1. 如果swiper-item内部view宽度无效，可以尝试以下方法：
.swiper-item view {
  width: 100% !important;
  box-sizing: border-box;
}
  1. 确保外层view没有限制性样式，比如：
.outer-view {
  width: 100%;
  overflow: visible;
}
  1. 完整示例代码结构：
<view class="container">
  <swiper class="swiper" :style="{width: '300px'}">
    <swiper-item class="swiper-item">
      <view class="content" style="width: 100%">内容</view>
    </swiper-item>
  </swiper>
</view>
回到顶部