微信小程序数据懒加载

业务中我们常会遇到图片较多、或者数据较多的列表，一次渲染出来的话轻则渲染时间过长，重则可能直接罢工白屏，什么都渲染不出来，这个时候懒加载(只渲染视口中的数据)就很有必要了。由于在小程序中，web上的一些懒加载方案并不适用。我所采用方法的思路是：1.判断视口能展示几条数据 2.定义一个数组，长度和展示的数据列表长度一致，数组中前几个（和能展示的数据条数一致）设为true，其余设为false 3.滚动时根据scrollTop，把出现在视口中元素对应的位置设为true。

以下代码写法为wepy 2.x的:

<scroll-view
  scroll-y="true"
  style="height: {{goodsListheight}}"
  class="goodlist"
  scroll-into-view="{{toView}}"
  @scroll="onGoodsScroll"
>
  <div
    v-for="(item, index) of pageData"
    :key="item.uuid"
  >
    <image
      src="{{imgDomain}}{{item.picture}}"
      class="img"
      v-if="dataShow[index]"
    />
    <div
      class="item-right"
      v-if="dataShow[index]"
    >
    </div>
  </div>
</scroll-view>

data: {
  pageData: [], //当前商品数据
  dataShow: [], //控制数据懒加载处理 长度和商品列表相同 为true数据显示 false不显示
  scrollTop: 0, //数据列表的scrollTop
},
watch: {
  pageData(val) {
      let arr = [true, true, true, true] //默认为true的条数;
      let falseArr;
      if (val.length > 4) {
        falseArr = new Array(val.length - 4).fill(false);
      }
      arr = arr.concat(falseArr);
        //103为一条数据的高度 得出出现在视口最顶部元素的index
      let index = Math.floor(this.scrollTop / 103);
      for (let i = 0; i < index + 5; i++) {
        if (!arr[i]) {
          arr[i] = true;
        }
      }
      this.dataShow = arr;
  }
},
methods: {
  onGoodsScroll(e) {
      const { scrollTop } = e.$wx.detail;
      this.scrollTop = scrollTop;
      let index = Math.floor(scrollTop / 103);
      let dataShow = this.dataShow;
      for (let i = 4; i < index + 5; i++) {
        if (!dataShow[i]) {
          this.$set(this.dataShow, i, true);
        }
      }
  }
}