简介

wmp-lazy-image 是一款微信小程序图片懒加载自定义组件，当图片过多时，只加载可视区域的图片，避免过多占用网络请求，使用wmp-lazy-image 可让您更专注于业务逻辑。

使用

初始化项目

npm init

安装

npm i @chenbz/wmp-lazy-image

构建npm

工具 => 构建npm

使用

/pages/home/index.json

{
    "usingComponents": {
        "lazy-image": "@chenbz/wmp-lazy-image"
    }
}

/pages/home/index.wxml

<view>
  <lazy-image src="https://s1.ax1x.com/2022/05/08/OlHYdA.png"></lazy-image>
</view>

属性

| 属性名 | 类型 | 默认值 | 描述 | | ------------ | ------ | ----------------------------------------- | ----------------- | | src | String | https://s1.ax1x.com/2022/05/08/OlbiFI.gif | 图片url（必传！） | | lazyImageUrl | String | https://s1.ax1x.com/2022/05/08/OlbiFI.gif | "加载中"图片url | | mode | String | widthFix | 模式 |