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

小程序的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和安卓上都没有了任何问题
将这种解决方法提供出来，让大家避免坑