# wkiwi-lazy-img

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

Latest version **1.0.0** (published 2020-03-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install wkiwi-lazy-img
pnpm add wkiwi-lazy-img
yarn add wkiwi-lazy-img
bun add wkiwi-lazy-img
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-03-23 |
| First published | 2020-03-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wkiwi |
| Maintainers | wkiwi |
| Keywords | 小程序图片懒加载, uni-app图片懒加载, 图片占位, lazy-load, wkiwi-lazy-img |

## Links

- npm: https://www.npmjs.com/package/wkiwi-lazy-img
- npm.io page: https://npm.io/package/wkiwi-lazy-img

## Recent versions

- 1.0.0 (latest) — 2020-03-23

## README

<!--
 * @Author: wkiwi
 * @Email: w_kiwi@163.com
 * @Date: 2020-03-04 17:38:38
 * @LastEditors: wkiwi
 * @LastEditTime: 2020-03-23 10:25:29
 -->
# 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

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

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

   ```html
   <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. 更新页面滚动顶部距离


```js

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`

---
_Source: https://npm.io/package/wkiwi-lazy-img · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._