[图片] 如图.flex-item{ flex:1} 其子元素.map-box高度坍塌了。在安卓上正常。

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

[代码]async onShareAppMessage() {[代码][代码]    [代码][代码]// console.log(this.listData.firstMessage);[代码][代码]    [代码][代码]var[代码] [代码]_this = [代码][代码]this[代码][代码];[代码][代码]    [代码][代码]// var zfimg = "";[代码][代码]    [代码][代码]const data = await  [代码][代码]new[代码] [代码]Promise([代码][代码]function[代码][代码](resolve) {[代码][代码]      [代码][代码]wx.canvasToTempFilePath({[代码][代码]        [代码][代码]x: 0,[代码][代码]        [代码][代码]y: 0,[代码][代码]        [代码][代码]width: _this.rpx * 375,[代码][代码]        [代码][代码]height: _this.canvasHeight1,[代码][代码]        [代码][代码]destWidth: _this.rpx * 375 * _this.pixelRatio,[代码][代码]        [代码][代码]destHeight: _this.canvasHeight1 * _this.pixelRatio,[代码][代码]        [代码][代码]canvasId: [代码][代码]"myCanvas1"[代码][代码],[代码][代码]        [代码][代码]success: [代码][代码]function[代码][代码](res) {[代码][代码]          [代码][代码]console.log(res.tempFilePath);[代码][代码]          [代码][代码]// zfimg = res.tempFilePath;[代码][代码]          [代码][代码]resolve(res.tempFilePath);[代码][代码]        [代码][代码]}[代码][代码]      [代码][代码]});[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]console.log(data);  //这里可以打印出图片路径[代码][代码]    [代码][代码]return[代码] [代码]{[代码][代码]      [代码][代码]title: _this.listData.firstMessage,[代码][代码]      [代码][代码]path: [代码][代码]"/pages/index/main?id="[代码] [代码]+ _this.listData.id,[代码][代码]      [代码][代码]imageUrl: data,[代码][代码]      [代码][代码]success: res => {[代码][代码]        [代码][代码]console.log([代码][代码]"转发成功"[代码][代码], res);[代码][代码]      [代码][代码]},[代码][代码]      [代码][代码]fail: res => {[代码][代码]        [代码][代码]console.log([代码][代码]"转发失败"[代码][代码], res);[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]};[代码][代码]  [代码][代码]},[代码][图片] 这个转发图片应该展示我用canvas生成的图片