miniprogram-image

the miniprogram image component for large picture.

• UX
  • 模糊缩略图
  • 错误重试
  • 动画
    • loading
    • 淡入
• API
  • 全局LoggerHandler
    • onLoad
    • onError

install

npm i miniprogram-image -S

{
  "usingComponents": {
    "img": "miniprogram-image"
  }
}

usage

使用组件

<img
    src="高清大图.jpg"
    data-thumb="缩略图或者本地默认图片.jpg, 无则使用loading动画"
    data-retry="{{1，出错重试次数，默认1次}}"
    data-lazy="{{true}}"
    mode="scaleToFill"
    bind:fail="onFail"
    bind:update="onUpdate"
    height="高度"
/>

全局配置

import {config} from 'miniprogram-image'
config.retry = 5 //全局默认重试次数，若组件中设置则优先使用组件设置
config.onError = (event,url)=>{} // 出错回调LoggerHandler
config.onLoad = (event,url)=>{} // 成功加载LoggerHandler

examples