wkiwi-lazy-img

wkiwi-lazy-img

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

背景

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

实现思路

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

使用方法

1. 安装组件

npm install --save wkiwi-lazy-img

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

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

1. 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	否	设置图片样式

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

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