1.0.0 • Published 4 years ago
wkiwi-lazy-img v1.0.0
wkiwi-lazy-img
uni-app框架 图片懒加载自定义组件 主要兼容微信小程序 可配置占位图以及图片加载失败占位图
背景
小程序原生图片组件 image 提供的图片懒加载功能 lazy-load
限制过多,只针对 page 与 scroll-view 下的 image 有效。
实现思路
使用 uni.createSelectorQuery()
查找节点获取图片距离顶部距离,与页面滚动距离进行比较
使用方法
- 安装组件
npm install --save wkiwi-lazy-img
- 在页面引入组件 wkiwi-lazy-img
import lazyImg from "../wkiwi-lazy-img/wkiwi-lazy-img.vue";
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 否 设置图片样式 更新页面滚动顶部距离
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
1.0.0
4 years ago