收藏
回答

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

问题模块
API和组件

代码大概如下

<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并不会。

最后一次编辑于  2017-06-30
回答关注问题邀请回答
收藏

8 个回答

  • 郭凯峰คิดถึง
    郭凯峰คิดถึง
    2017-07-14

    嘿嘿

    2017-07-14
    赞同
    回复
  • 郭凯峰คิดถึง
    郭凯峰คิดถึง
    2017-07-14

    https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=1730769302&docid=fa962e46aa26431ac5dd4a8665ce04de

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

    2017-07-14
    赞同
    回复
  • 郭凯峰คิดถึง
    郭凯峰คิดถึง
    2017-07-14

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

    2017-07-14
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-07-14

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

    2017-07-14
    赞同
    回复
  • 郭凯峰คิดถึง
    郭凯峰คิดถึง
    2017-07-13

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


    2017-07-13
    赞同
    回复
  • SHINING诗永
    SHINING诗永
    2017-07-13

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

    我的两种解决办法:

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

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

    2. 放弃这种做法~

    2017-07-13
    赞同
    回复
  • 郭凯峰คิดถึง
    郭凯峰คิดถึง
    2017-07-13

    遇到同样问题,解决没有

    2017-07-13
    赞同
    回复