@chenbz/wmp-lazy-image

简介

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	模式