评论

mina-lazy-image: 图片懒加载自定义组件

图片懒加载自定义组件

Github: https://github.com/alexayan/mina-lazy-image

功能

图片在视口中出现才进行加载显示,优化页面性能

使用方法

  1. 安装组件
npm install --save mina-lazy-image
  1. 在页面的 json 配置文件中添加 mina-lazy-image

使用此组件需要依赖小程序基础库 2.2.2 版本,同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档

{
  "usingComponents": {
    "mina-lazy-image": "mina-lazy-image/index"
  }
}
  1. WXML 文件中引用 mina-lazy-image

    <mina-lazy-image src="{{src}}" mode="widthFIx" image-class="custom-class-name"/>
    

    mina-lazy-image 的属性介绍如下:

    字段名 类型 必填 描述
    src String 图片链接
    placeholder String 占位图片链接
    mode String 请参考 image 组件 mode 属性
    webp Number 请参考 image 组件 webp 属性
    showMenuByLongpress Boolean 请参考 image 组件 show-menu-by-longpress 属性
    styles String 设置图片样式
    viewport Object 默认为 {bottom: 0},配置图片显示区域

    mina-lazy-image 外部样式类

image-class, image-container-class

最后一次编辑于  01-09  
点赞 0
收藏
评论
登录 后发表内容