嵌套在map组件内的cover-image
<cover-view class="detail-box" hidden="{{!spotDetail.show}}" catchtap="markersMenuTap" id="1"> <cover-view class="flex-h img-title"> <!--发现cover-image没有加wx:if，首次图片会渲染不了 --> <cover-view class="img-box"> <cover-image class="img" src="{{spotDetail.newPlaceImgUrl}}" wx:if="{{spotDetail.newPlaceImgUrl}}" binderror="detailImgErr" bindload="detailImgLoad"></cover-image> <cover-image class="play" src="{{audio.isPlay?'../../img/pause-icon-v2.png':'../../img/play-icon-v2.png'}}" catchtap="audioSpotDetail" wx:if="{{spotDetail.type==='spot'&&spotDetail.isHaveExplainContents}}"></cover-image> </cover-view> <cover-view class="title-box"> <cover-view class="title">{{spotDetail.title}}</cover-view> <cover-view class="btn" catchtap="markersMenuTap" id="2">前往</cover-view> </cover-view> </cover-view></cover-view> |
.detail-box { position: absolute; bottom: 0; padding: 39rpx 39rpx; width: 100%; /* height: 462rpx; */ background: white; -webkit-box-sizing: border-box; box-sizing: border-box;}.detail-box .close-btn { display: block; position: absolute; top: 0; right: 39rpx; width: 60rpx; height: 60rpx; text-align: center;}.detail-box .close-btn cover-image { margin: 18rpx auto; width: 39rpx; height: 39rpx; /* line-height: auto; */}.detail-box .img-title { position: relative; font-size: 32rpx; color: #363636; line-height: 48rpx; overflow: hidden;}.img-title .img-box { position: relative; margin-right: 27rpx; width: 180rpx; height: 180rpx;}.img-box .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: solid 1px transparent; border-radius: 9rpx; -webkit-box-sizing: border-box; box-sizing: border-box;}.img-box .play { position: absolute; top: 50%; left: 50%; margin: -42rpx -42rpx; width: 84rpx; height: 84rpx;}.img-title .title { margin-bottom: 15rpx; width: 426rpx; height: 99rpx; line-height: 51rpx; font-size: 32rpx; color: #363636; overflow: hidden; white-space: pre-wrap;} |
父容器用的absolute定位，，图片父容器用的relative定位，图片是absolute定位。
会出现cover-image.img使用的阿里云cdn地址图片，但是IOS经常渲染不出来，加了bindload和binderror发现能正常进入load函数，可是图片是空白的
被cover-image加了border和wx:if都没办法解决。。如果有遇到的朋友希望告知下是什么原因导致的。怎么解决
你好，请提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
请问解决了么？我也遇到了这个问题
没有，
ios 和 安卓都碰到同样问题