bb-miniprogram-image v1.0.2

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的使用方式