< view style = "font-size:0;" >
< image style = "display: block;width:100%;font-size:0;" lazy-load src = "https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06c7ac4f4a02087bf40ad1cbaf.jpg" mode = "widthFix" ></ image >
< image style = "display: block;width:100%;font-size:0;" lazy-load src = "https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06c7ac4f4a02087bf40ad1cbaf.jpg" mode = "widthFix" ></ image >
</ view >
|
|
重现代码片段如上
正常表现:
小米机型:
关联问题https://developers.weixin.qq.com/community/develop/doc/000e0ac65bc2507123a78a8795b800?highLine=%25E5%259B%25BE%25E7%2589%2587%25E6%258B%25BC%25E6%258E%25A5%25E6%259C%2589%25E7%2599%25BD%25E7%25BA%25BF
https://developers.weixin.qq.com/community/develop/doc/00086cca390c20be50d7ba75a56c00?highline=两个图片中间有白线
更新:
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,
})
})
},
})
刚刚也遇到了,网上的6种方法也试过了不管用,最后给图片加上margin-top:-1px;单位是px
这个问题貌似没法解决吧
你好,解决了么?
最优解决方案:
flex布局一键搞定问题,你值得拥有
wxml
<view class="detail-box"> <image style="width: 100%;" wx:for="{{commodityInfo.detailPictures}}" src="{{item.cloudId}}" mode="widthFix"></image> </view>
wxss
.detail-box{ display: flex; flex-flow: column nowrap; }
试试设置包裹这些图片的那个父元素
font-size: 0;
我是用浮动布局来解决这个问题的
获取图片宽高。计算宽高比。赋值image 外部view 。设置view 的background 背景为image的src
开发者工具见白线,真机预览没有复现,一切正常,小米
https://developers.weixin.qq.com/s/vqS2mFm87Oc1已生成链接