小程序 - 图片列表显示lazyload效果

在做一个短视频平台，涉及到的都是一些列表模块。因为小程序没有提供lazyload api，所以只能自己写一个了。。。

开发涉及 <scroll-view></scroll-view>滚动机制及queryMultipleNodes方法，不清楚的请自行查阅api文档。

html代码：

 <swiper-item class='slider-swiper' style='height:100%'>
   <scroll-view scroll-y='true' style="height:100%" lower-threshold='200' bindscroll="view_scroll" bindscrolltolower='scrollHandler'>
  <block wx:for="{{star_list}}">
      <view class='video'>
              <image src='{{index < lazyIndex  ? item.photo.thumb : "/assets/img/default_img.jpg"}}' />  //如果当前图片索引小于lazyIndex则使用默认图片
               </view>
     </block>
   </scroll-view>
 </swiper-item>

js代码:

 // 获取列表到顶部的距离
   queryMultipleNodes: function () {
     var query = wx.createSelectorQuery()
     query.select('#lazyStarts').boundingClientRect()
     query.selectViewport().scrollOffset()
     query.exec(function (res) {
       fixedHei = res[0].top // 获取列表到顶部的距离
     })
   },
   //  理解思路：获取可视区域。距离顶部的距离减去固定高度(导航、轮播、话题)。除播映列表高度，从而获取到index,由index设置列表lazyload
   view_scroll: function (e) {
     let cls = this;
     wx.getSystemInfo({
       success: function (res) {
         wHeight = res.windowHeight
       },
     })
     if (parseInt(e.detail.scrollTop) > parseInt(wx.getStorageSync('shei'))) {
       wx.setStorageSync('shei', e.detail.scrollTop); //设置缓存，用于在二次打开后，去除lazyload效果
       let scrollTop = (e.detail.scrollTop) - fixedHei; //滚动的高度减去列表到顶部的距离，间接的得到列表滚动距离
       let lazy_index = Math.ceil((scrollTop / 303.6)); //通过滚动的距离除上每张图片的高度，从而获取当前列表的index
       cls.setData({
         lazyIndex: lazy_index + 2 //用于设置index延迟，可根据自己的情况修改
       })
     }
   },

效果：