微信小程序如何利用createIntersectionObserver实现图片懒加载

Page({
    data: {
      group: [
        {
          src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
          show: false,
          def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
        },
       ...... // 更多图片信息
      ]
    },
    onLoad: function () {
      let group = this.data.group  // 获取原数据
      for (let i in group) {
        // 设置监听回调事件，当元素 .loadImg{{i}},进入页面20px内就触发回调事件，设置图片为真正的图片，通过show控制
        wx.createIntersectionObserver().relativeToViewport({ bottom: 20 }).observe('.loadImg' + i, (ret) => {
          if (ret.intersectionRatio > 0) {
            group[i].show = true
          }
          this.setData({ // 更新数据
            group
          })
        })
      }
    }
  })

<block wx:for="{{group}}" wx:key="1">
    <view class="loadImg loadImg{{index}} {{item.show? 'active' : ''}}" >
      <!-- 通过条件判断确认图片的src -->
      <image wx:if='{{item.show}}' style='width:100%;height:100%;' src='{{item.src}}'></image>
      <image wx:else style='width:20%;height:20%;margin:0 auto;margin-top:50%;transform:translateY(-50%);' src='{{item.def}}' mode='aspectFit'></image>
    </view>
  </block>

.loadImg{
    width:100vw;
    height:46.3vw;
    transition: all .2s ease-in-out;
    opacity: 0;
  }
  .loadImg.active{
    opacity: 1
  }