收藏
回答

关于小程序中swiper组件设置flex属性在IOS上的问题(解决方案)

问题模块
API和组件

小程序的swiper组件设置flex属性后,它的子组件swiper-item在IOS上会显示为默认的150px值,实验了各种方法,今天终于解决了问题,给大家分享一下!

wxml代码:

<view id="shelfMain">
        <swiper id="shelfGoods" current="{{selectIndex}}" catchchange="swiperChange">
            <block wx:for="{{shelfData}}" wx:for-item="goods" wx:for-index="shelfIndex" wx:key="shelf">
                <swiper-item class="shelfItem" class="swiperItem">
                    <template is="shelfList" data="{{goods,shelfIndex,orderList}}"></template>
                </swiper-item>
            </block>
        </swiper>
    </view>


开始只在swiper设置flex布局,然后在真机测试中安卓手机是没有任何问题的,但是IOS出现了问题,就是IOS只显示了150px,就是swiper-item的高度;

1.第一步解决思路是在外层报上shelfMain 设置上flex 然后设置但swiper设置

width: 100%;

height: 100%;

但是进入真机测试的话,只有IOS11以上可以正常显示,而低版本的IOS直接没有任何显示内容(其他的方法也是尝试了无数,哭哭哭)

2.祭出大招:使用一种css方式将其充满shelfMain的flex布局

#shelfMain {
  width: 100%;
  flex: 1;
  position: relative;
}
 
#shelfGoods {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
  bottom: 0;
  right: 0;
}

使用这段CSS发现,神奇的事情发生了,直接全部OK,swiper充满了shelfMain的flex布局的所有地方,然后再IOS和安卓上都没有了任何问题

将这种解决方法提供出来,让大家避免坑

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

7 个回答

  • c_wheel
    c_wheel
    2018-09-11

    找了各种flex兼容的方法,搞不定。非常感谢。

    2018-09-11
    赞同 1
    回复
  • L.Lawlite
    L.Lawlite
    10-09



    我目前还是无法自适应

    10-09
    赞同
    回复
  • Toy
    Toy
    2017-11-15

    但是还是想知道原因,是小程序样式的bug 还是用了别的什么样式影响到了.....

    2017-11-15
    赞同
    回复
  • Toy
    Toy
    2017-11-15

    握草,我找了各种方式,没想到这样就搞定了.....    感谢!

    2017-11-15
    赞同
    回复
  • Fairyily
    Fairyily
    2017-11-03

    这个如果swiper不设置高度,page不设置高度,还是不能让swiper显示的呢

    2017-11-03
    赞同
    回复
  • 王晨|天星宿命|
    王晨|天星宿命|
    2017-08-01

    必须用flex啊。。

    page {
      width: 100%;
      height: 100%;
    }
    .page {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #f0f0f2;
    }
     
    .swiper-tab{
      height: 100%;
      margin: 0rpx 0rpx 12rpx 0rpx;
      flex: 1 0 300rpx;
     
    .swiper-item {
      height: 100%;
    }
     
    这样没问题


    2017-08-01
    赞同
    回复
  • 生活白痴
    生活白痴
    2017-07-20

    想请问下 你这种做法能让swiper 根据内容自适应吗?

    2017-07-20
    赞同
    回复