258资源分享网

零、问题的由来

一般在前端展示图片时都会碰到这两个常见的需求：

图片未加载完成时先展示占位图，等到图片加载完毕后再展示实际的图片。

假如图片链接有问题（比如 404），依然展示占位图。甚至你还可以增加点击图片再次加载的功能。（例如知乎）

然鹅，小程序原生组件 image 并没有提供这些常用功能...

注：这里加了 2s 的延迟

一、常规操作

在小程序没还没推出自定义组件功能时，只能通过改变 Page 中的 data 来展示兜底的占位图，所以当时的处理方式十分蛋疼...

1.1.相同默认图

由于需要知道这个图片的数据路径，所以不得不在每个 image 上加上类似 data-img-path 的东西。

<view wx:for=http://www.yiyongtong.com/archives/"{{ obj.arr }}" wx:key="imgSrc" wx:for-item="item" wx:for-index="itemIdx" > <image src=http://www.yiyongtong.com/archives/"{{ item.imgSrc }}" binderror="onImageError" data-img-path="obj.arr[{{ itemIdx }}].imgSrc" /> </view> 复制代码 const DEFAULT_IMG = '/assets/your_default_img' Page({ data: { obj: { arr: [ { imgSrc: 'your_img1' }, { imgSrc: 'your_img2' }, ], }, }, onImageError ({ target: { dataset: { imgPath } }, }) { this.setData({ [imgPath]: DEFAULT_IMG, }) }, }) 复制代码 1.2.不同默认图

如果默认图片不同呢？例如球员、球队和 feed 的默认图片一般都是不同的。

那么一般只好再增加一个属性例如 data-img-type 来标识默认图的类型。

<!-- 球队图 --> <image ... data-img-type="team" /> <!-- 球员图 --> <image ... data-img-type="player" /> 复制代码 const DEFAULT_IMG_MAP = { feed: '/assets/default_feed', team: '/assets/default_team', player: '/assets/default_player', } Page({ data: { obj: { arr: [ { imgSrc: 'your_img1' }, { imgSrc: 'your_img2' }, ], }, }, onImageError ({ target: { dataset: { imgPath, imgType } }, }) { this.setData({ [imgPath]: DEFAULT_IMG_MAP[imgType], }) }, }) 复制代码 1.3.图片在模板中

页面层级浅倒还好，如果跨模板了，那么模板就可能要用一个类似于 pathPrefix 的属性来传递模板数据的路径前缀。

<!-- 球员排行模板 pathPrefix: String playerList: Array ... --> <template name="srPlayerRank"> <view wx:for=http://www.yiyongtong.com/archives/"{{ playerList }}" wx:key="imgSrc" wx:for-item="item" wx:for-index="itemIdx" > <image src=http://www.yiyongtong.com/archives/"{{ item.imgSrc }}" binderror="onImageError" data-img-type="player" data-img-path=http://www.yiyongtong.com/archives/"{{ pathPrefix }}.playerList[{{ itemIdx }}].imgSrc" /> </view> </template> 复制代码

最后在失败回调里调用 setData({ [path]: DEFAULT_IMG }) 重新设置图片地址。

就问你蛋不蛋疼？这一坨 data-img-path=http://www.yiyongtong.com/archives/"{{ pathPrefix }}.playerList[{{ itemIdx }}].imgSrc" 代码真让人无发可脱...

二、自定义组件

有了自定义组件后，用领袖【窃·格瓦拉】的话来说的话就是：“感觉好 door 了~”

2.1.原生自定义组件

原生写法一般要写4个文件：.json/.wxml/.js/.wxss

TuaImage.json

{ "component": true } 复制代码

TuaImage.wxml

<!-- 加载中的图片 --> <image hidden=http://www.yiyongtong.com/archives/"{{ !isLoading }}" src=http://www.yiyongtong.com/archives/"{{ errSrc }}" style="width: {{ width }}; height: {{ height }}; {{ styleStr }}" mode=http://www.yiyongtong.com/archives/"{{ imgMode }}" /> <!-- 实际加载的图片 --> <image hidden=http://www.yiyongtong.com/archives/"{{ isLoading }}" src=http://www.yiyongtong.com/archives/"{{ imgSrc || src }}" mode=http://www.yiyongtong.com/archives/"{{ imgMode }}" style="width: {{ width }}; height: {{ height }}; {{ styleStr }}" bindload="_onImageLoad" binderror="_onImageError" lazy-load=http://www.yiyongtong.com/archives/"{{ true }}" /> 复制代码