问题在于你图片用了自适应后，高度变得有小数点了，上图的高度显示时图片是精准显示的，但是占位的空间不是，所以显示的时候就会出现这个问题（原因我猜测的，如果不是请纠正😂）
我这边在处理这个问题时，都是在外层套上一个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,
})
})
},
})
|
