小程序的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和安卓上都没有了任何问题
将这种解决方法提供出来，让大家避免坑
找了各种flex兼容的方法,搞不定。非常感谢。
找了好多方法，终于解决了，感谢感谢。
但是还是想知道原因，是小程序样式的bug 还是用了别的什么样式影响到了.....
握草，我找了各种方式，没想到这样就搞定了..... 感谢！
这个如果swiper不设置高度,page不设置高度,还是不能让swiper显示的呢
必须用flex啊。。
width:100%;height:100%;}.page {width:100%;height:100%;display: flex;flex-direction: column;background:#f0f0f2;}.swiper-tab{height:100%;margin:0rpx0rpx12rpx0rpx;flex:10300rpx;}.swiper-item {height:100%;}这样没问题想请问下 你这种做法能让swiper 根据内容自适应吗？