|
重现代码片段如上
正常表现：
小米机型：
关联问题https://image.wxopen.club/content_75177b74-4f19-11ea-a98e-001a7dda7111.png
https://image.wxopen.club/content_755af7e8-4f19-11ea-8ab5-001a7dda7111.png
更新：
https://developers.weixin.qq.com/s/vqS2mFm87Oc1已生成链接
开发工具上也有白线，只是非常细。
解决方式：
可以取巧在第二个图片添加margin-top: -1rpx;覆盖白线
问题在于你图片用了自适应后，高度变得有小数点了，上图的高度显示时图片是精准显示的，但是占位的空间不是，所以显示的时候就会出现这个问题（原因我猜测的，如果不是请纠正😂）
我这边在处理这个问题时，都是在外层套上一个view，然后在图片加载完成后，获取它调正后的大小，将可能存在小数的宽/高取整，这样就不会出现小白线的情况了（至少我这边测过的机型都没有问题了）
<view style="font-size:0;"> <view style="width:100%;height:{{imageheight1}}px;"> <image id="image1" style="display: block;width:100%;font-size:0;" lazy-load src="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06c7ac4f4a02087bf40ad1cbaf.jpg" mode="widthFix" bindload="resizeview1"></image> </view> <view style="width:100%;height:{{imageheight2}}px;"> <image id="image2" style="display: block;width:100%;font-size:0;" lazy-load src="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06c7ac4f4a02087bf40ad1cbaf.jpg" mode="widthFix" bindload="resizeview2"></image> </view></view> |
Page({ data: { imageheight1: 200, imageheight2: 200, }, resizeview1: function(e) { var query = wx.createSelectorQuery(); query.select('#image1').boundingClientRect(); query.exec((res) => { console.log(res[0].height); this.setData({ imageheight1: parseInt(res[0].height),//抛弃小数部分 }) }) }, resizeview2: function(e) { var query = wx.createSelectorQuery(); query.select('#image2').boundingClientRect(); query.exec((res) => { console.log(res[0].height); this.setData({ imageheight2: res[0].height, }) }) },}) |
强力驱动