bb-miniprogram-image

小程序图片自定义组件

背景

小程序原生图片组件 image 提供的图片懒加载功能 lazy-load 限制过多，只针对 page 与 scroll-view 下的 image 有效，且无法自己控制。官方组件在图片拉取失败后便不再拉取

实现思路

组件attached时获取网络状态(有无网),并监听网络变化。通过wx.createIntersectionObserver()判断图片是否出现在视窗中，如果网络允许则加载图片。如果无网则待网络状态变为有网时加载图片，图片如果加载失败，则在下一次页面显示时再次加载(共给予三次机会，超过则页面显示不再加载)

使用方法

1. 安装组件

npm i bb-miniprogram-image

2. 在需要引入组件的对应json文件中添加如下配置

  {
    "usingComponents": {
      "bb-image": "bb-image": "bb-miniprogram-image/index"
    }
  }

3. 在wxml文件中直接使用

<bb-image src="" />

4. 属性介绍

|字段名 |类型 |必填|描述 |:------ |------ |------ |------ |src |String |是 |图片链接 |mode |String |否 |请参考 image 组件 mode 属性 |webp |Boolean|否 |请参考 image 组件 webp 属性 |viewport |Object |否 |默认为 {bottom: 0}，配置图片显示区域 |showMenuByLongpress |Boolean |否 |请参考image组件show-menu-by-longpress属性

|styles | String |否 | 图片的行内样式

5. 外部样式类
   image-class, image-container-class, skeleton
   外部样式类可参考微信小程序文档中externalClasses的使用方式