swiper用flex:1来适应高度时，swiper-item高度继承默认150 - WXOPEN Club

代码大概如下

<view class="container">

<view class="nav"></view>

<swiper class="swiper">

<swiper-item></swiper-item>

</swiper>

</view>

.container {

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

justify-content:flex-start;

}

.nav {

width: 100%;

min-height: 160rpx;

}

.swiper {

flex: 1;

}

然后swiper-item的高度100%就是默认的150px了，无法做到自适应。这情况只在ios出现，android并不会。

8 回复

wlei1 楼6 年前

嘿嘿

liangxiuying2 楼6 年前

感谢反馈。这属于iOS系统的bug，所有纵向的flex布局都会有类似问题，目前暂时没有办法解决，请避免这样使用。

jshi3 楼6 年前

这是因为flex为1的<swiper>实际还是没有高度的，只是弹性布局拉伸了。所以<swiper-item>继承的100%height并没有成功。

我的两种解决办法：

强行给swiper加个高度，指定高度，如： height: 100%；
但这样安卓会有其他问题，不过苹果倒好了，你可以小程序启动是根据当前手机系统来加这个指定heght。
放弃这种做法~

jie274 楼6 年前

我现在想做的就是ios和安卓做判断一下系统信息，不同的系统用不同的css样式，现在正试着改呐

lili5 楼6 年前

楼上厉害了，提供了一种不错的布局方式！

guiying806 楼6 年前

//实验无数方法，终于可以啦，希望官方推荐

xiuying967 楼6 年前

我解决了这个问题，去看一下吧，求官方置顶一下

ming868 楼4 年前

遇到同样问题，解决没有