vant weapp 的商品卡片如何实现图片懒加载

vant weapp 中的商品卡片组件是基于微信小程序原生组件开发的，因此可以使用微信小程序提供的图片懒加载功能实现图片的懒加载。

具体实现方法如下：

1. 在商品卡片中使用 `image` 组件显示图片，并设置 `lazy-load` 属性为 true，开启图片懒加载功能。

2. 在 `Page` 或 `Component` 的 `onLoad` 生命周期中调用 `wx.createIntersectionObserver()` 方法创建一个新的 IntersectionObserver 实例。

3. 使用 `IntersectionObserver` 实例的 `relativeToViewport()` 方法指定要观察的目标节点，一般是 `scroll-view` 或 `view` 组件。

4. 使用 `IntersectionObserver` 实例的 `observe()` 方法观察商品卡片中的图片节点，当图片进入视窗时，图片会自动加载。

下面是一个简单的示例代码：

<view class="card">
  <image class="image" src="{{imageUrl}}" lazy-load></image>
  <view class="info">{{title}}</view>
</view>

Page({
  onLoad() {
    const observer = wx.createIntersectionObserver(this);
    observer.relativeToViewport().observe('.image', (res) => {
      if (res.intersectionRatio > 0) {
        // 图片进入视窗，可以在这里触发图片加载或其他操作
      }
    });
  }
});

注意，IntersectionObserver 的使用需要注意兼容性，需要在微信客户端 1.9.3 或以上版本才支持。