关于小程序中swiper组件设置flex属性在IOS上的问题(解决方案)
小程序的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和安卓上都没有了任何问题 将这种解决方法提供出来，让大家避免坑
