swiper用flex:1来适应高度时,swiper-item高度继承默认150
发布于 5 年前 作者 fhou 18840 次浏览 来自 问答

代码大概如下

<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 回复

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

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

我的两种解决办法:

  1. 强行给swiper加个高度,指定高度,如: height: 100%;

    但这样安卓会有其他问题,不过苹果倒好了,你可以小程序启动是根据当前手机系统来加这个指定heght。

  2. 放弃这种做法~

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

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

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

遇到同样问题,解决没有

回到顶部