微信小程序点击列表图片出现响应事件位置偏移问题(案例和解决方案)

效果图

问题

点击了第一个 item 背景，事件正常响应，点击 item 的图片，向下错位响应，即：点击第一个响应第二个，点击第二个响应第三个

代码:

//wxml
<block wx:if="{{info.work && info.work.length > 0}}" wx:for="{{info.work}}" wx:key="index">
  <view class="item_view" bindtap="onPerformTask">
    <view class="img_bkg theme-bkg">
      <image class="img" src='/images/icon_xxx.png' mode="aspectFit" />
    </view>
    ...
</block>

//wxss
.item_view {
  display: flex;
  width: 700rpx;
  align-items: center;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.img_bkg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120rpx;
  height: 120rpx;
  border-radius: 15rpx;
  margin-left: 20rpx;
  margin: 18rpx 27rpx 19rpx 20rpx;
}

问题猜测：

图片没有设置宽高时，系统计算实际点击位置时，出现渲染区域和点击区域不一致的问题(针对列表)，即：内部图片脱离了文档流，我们可以通过给图片设置大小，或者设置禁止脱离父元素（超出后隐藏）

解决方案(已解决) ：

方案一：设置图片宽高:

只需要给内部图片设置固定宽高即可，没有图片也没有问题

<image class="img" src='/images/icon_xxx.png' mode="aspectFit" />

.img { width: 100rpx; height: 100rpx; }

方案二：禁止子布局脱离父元素，设置父节点参数 overflow: hidden 即可;

<view class="img_bkg theme-bkg">
  <image src='/images/icon_xxx.png' mode="aspectFit" />
</view>

.img_bkg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120rpx;
  height: 120rpx;
  border-radius: 15rpx;
  margin-left: 20rpx;
  margin: 18rpx 27rpx 19rpx 20rpx;
  overflow: hidden;
}

最后

这也是之前写代码时没有注意到的问题，因此记录一下，避免下次再犯，实际上理解了 BFC 后，就全明白了，继续学习，自己太菜了😂