uniapp swiper设置overflow: auto 无效

分类：uni-app

swiper uniapp

遇到一个需求需要在swiper中的图片位置超出容器高度范围但是对swiper-item设置overflow-y:visible 无效；

2025-11-27 10:50 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

在uniapp中，swiper组件默认会强制设置子项(swiper-item)宽高为100%，且"宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开"。这会导致直接设置overflow属性无效。

明确使用场景：swiper设计用于横向/纵向轮播图，不适合复杂长列表。若需竖向滚动内容，建议改用<scroll-view>并设置固定高度：
```
scroll-view {  
 height: 300px; /* 必须指定固定高度 */  
 overflow-y: auto;  
}  
```
如必须用swiper实现竖向滚动：
- 添加vertical="true"属性
- 确保swiper和swiper-item都有明确高度
- 示例代码参考官方swiper示例
复杂列表场景：根据文档提示，"用swiper做复杂长列表需要较高优化技巧"，推荐使用插件市场方案：
- 查看高性能左右拖动长列表插件

更多详情可查阅swiper组件文档。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册