Open GF-Huang opened 1 week ago
<view class="order-list-container"> <view class="order-list-item round-border" wx:for="{{orders}}" wx:key="*this"> <van-image src="随便一张图片" fit="fill" radius="10rpx" custom-class="order-img" /> </view> </view>
.order-list-container { display: flex; flex-direction: column; gap: 20rpx; padding: 20rpx; } .order-list-item { padding: 20rpx; background-color: white; display: grid; grid-template-columns: auto 1fr; gap: 20rpx; } .order-img { width: 200rpx; height: 200rpx; } .round-border { border-radius: 10rpx; overflow: hidden; }
1.11.6
图片下方多了4px空白。
里面的 shadow-root 是正常的,不知道为什么。
如上所述。
微信开发者工具1.06.2407120 和 iOS 真机
.order-list-item 这个类名加上 font-size: 0 就可以了。
.order-list-item
font-size: 0
行内块的原因,font-size:0 或者 vertical-align:middle
重现链接
Vant Weapp 版本
1.11.6
描述一下你遇到的问题。
图片下方多了4px空白。
里面的 shadow-root 是正常的,不知道为什么。
重现步骤
如上所述。
设备/浏览器
微信开发者工具1.06.2407120 和 iOS 真机