找了好多方法,终于解决了,感谢感谢。
关于小程序中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和安卓上都没有了任何问题 将这种解决方法提供出来,让大家避免坑
04-02