wkiwi-lazy-img

uni-app框架 图片懒加载自定义组件 主要兼容微信小程序 可配置占位图以及图片加载失败占位图

背景

​ 小程序原生图片组件 image 提供的图片懒加载功能 lazy-load 限制过多，只针对 page 与 scroll-view 下的 image 有效。

实现思路

使用 uni.createSelectorQuery() 查找节点获取图片距离顶部距离，与页面滚动距离进行比较

使用方法

1. 安装组件

npm install --save wkiwi-lazy-img

2. 在页面引入组件 wkiwi-lazy-img

import lazyImg from "../wkiwi-lazy-img/wkiwi-lazy-img.vue";

3. WXML 文件中引用 wkiwi-lazy-img

   <wkiwi-lazy-imgs  
   :showMenuByLongpress="true" 
   :scrollTop="scrollTop" 
   :index="index"  
   :src="item.avatar" 
   :windowHeight="windowHeight" 
   :distance="windowHeight" 
   mode="aspectFill" 
   placeholder="/static/image/common/lottery-default.png" 
   ></wkiwi-lazy-imgs>
      

   wkiwi-lazy-img 的属性介绍如下：

   | 字段名 | 类型 | 必填 | 描述 | | ------------------- | ------- | ---- | -------------------------------------------| | index | Number | 是 | 下标 | | scrollTop | Number | 是 | 滚动到顶部距离 | | windowHeight | Number | 是 | 屏幕高度 | | distance | Number | 否 | 距离底部多少 PX 开始预加载 | | src | String | 是 | 图片链接 | | placeholder | String | 否 | 占位图片链接 | | mode | String | 否 | 请参考 image 组件 mode 属性 | | webp | Number | 否 | 请参考 image 组件 webp 属性 | | showMenuByLongpress | Boolean | 否 | 请参考 image 组件 show-menu-by-longpress 属性 | | styles | String | 否 | 设置图片样式 |

4. 更新页面滚动顶部距离

onPageScroll: function(res) { //页面滚动监听
  let _this = this;
  clearTimeout(this.pageScrollTimeoutId);
  this.pageScrollTimeoutId = setTimeout(function() { //节流
    _this.scrollTop = res.scrollTop
  }, 30);
},

wkiwi-lazy-image 外部样式类

image-class, image-container-class