一般在前端展示圖片時都會碰到這兩個常見的需求:
然鵝,小程序原生組件 image 并沒有提供這些常用功能...
注:這里加了 2s 的延遲
在小程序沒還沒推出自定義組件功能時,只能通過改變 Page 中的 data 來展示兜底的占位圖,所以當(dāng)時的處理方式十分蛋疼...
由于需要知道這個圖片的數(shù)據(jù)路徑,所以不得不在每個 image 上加上類似 data-img-path 的東西。
<view wx:for="{{ obj.arr }}" wx:key="imgSrc" wx:for-item="item" wx:for-index="itemIdx" > <image src="{{ item.imgSrc }}" binderror="onImageError" data-img-path="obj.arr[{{ itemIdx }}].imgSrc" /> </view> 復(fù)制代碼
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, }) }, }) 復(fù)制代碼
如果默認(rèn)圖片不同呢?例如球員、球隊和 feed 的默認(rèn)圖片一般都是不同的。
那么一般只好再增加一個屬性例如 data-img-type 來標(biāo)識默認(rèn)圖的類型。
<!-- 球隊圖 --> <image ... data-img-type="team" /> <!-- 球員圖 --> <image ... data-img-type="player" /> 復(fù)制代碼
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], }) }, }) 復(fù)制代碼
頁面層級淺倒還好,如果跨模板了,那么模板就可能要用一個類似于 pathPrefix 的屬性來傳遞模板數(shù)據(jù)的路徑前綴。
<!-- 球員排行模板 pathPrefix: String playerList: Array ... --> <template name="srPlayerRank"> <view wx:for="{{ playerList }}" wx:key="imgSrc" wx:for-item="item" wx:for-index="itemIdx" > <image src="{{ item.imgSrc }}" binderror="onImageError" data-img-type="player" data-img-path="{{ pathPrefix }}.playerList[{{ itemIdx }}].imgSrc" /> </view> </template> 復(fù)制代碼
最后在失敗回調(diào)里調(diào)用 setData({ [path]: DEFAULT_IMG }) 重新設(shè)置圖片地址。
就問你蛋不蛋疼?這一坨 data-img-path="{{ pathPrefix }}.playerList[{{ itemIdx }}].imgSrc" 代碼真讓人無發(fā)可脫...
有了自定義組件后,用領(lǐng)袖【竊·格瓦拉】的話來說的話就是:“感覺好 door 了~”
原生寫法一般要寫4個文件:.json/.wxml/.js/.wxss
{ "component": true } 復(fù)制代碼
<!-- 加載中的圖片 --> <image hidden="{{ !isLoading }}" src="{{ errSrc }}" style="width: {{ width }}; height: {{ height }}; {{ styleStr }}" mode="{{ imgMode }}" /> <!-- 實際加載的圖片 --> <image hidden="{{ isLoading }}" src="{{ imgSrc || src }}" mode="{{ imgMode }}" style="width: {{ width }}; height: {{ height }}; {{ styleStr }}" bindload="_onImageLoad" binderror="_onImageError" lazy-load="{{ true }}" /> 復(fù)制代碼
const DEFAULT_IMG = '/assets/your_default_img' Component({ properties: { // 圖片地址 src: String, // 圖片加載中,以及加載失敗后的默認(rèn)地址 errSrc: { type: String, // 默認(rèn)是球隊圖標(biāo) value: DEFAULT_IMG, }, width: { type: String, value: '48rpx', }, height: { type: String, value: '48rpx', }, // 樣式字符串 styleStr: { type: String, value: '', }, // 圖片裁剪、縮放的模式(詳見文檔) imgMode: { type: String, value: 'scaleToFill', }, }, data: { imgSrc: '', isLoading: true, }, methods: { // 加載圖片出錯 _onImageError (e) { this.setData({ imgSrc: this.data.errSrc, }) this.triggerEvent('onImageError', e) }, // 加載圖片完畢 _onImageLoad (e) { this.setData({ isLoading: false }) this.triggerEvent('onImageLoad', e) }, }, }) 復(fù)制代碼
布吉島大家使用原生寫法時有木有一些感覺不方便的地方:
所以以下是一個使用單文件組件封裝原生 image 組件的例子。
<config> { "component": true } </config> <template lang="wxml"> <!-- 加載中的圖片 --> <image hidden="{{ !isLoading }}" src="{{ errSrc }}" style="{{ imgStyleStr }}" mode="{{ imgMode }}" /> <!-- 實際加載的圖片 --> <image hidden="{{ isLoading }}" src="{{ imgSrc || src }}" mode="{{ imgMode }}" style="{{ imgStyleStr }}" bindload="_onImageLoad" binderror="_onImageError" lazy-load="{{ true }}" /> </template> <script> /** * 圖片組件,能夠傳遞備用圖片以防圖片失效 * https://developers.weixin.qq.com/miniprogram/dev/component/image.html */ // 也可以設(shè)置為網(wǎng)絡(luò)圖片如: https://foo/bar.png const DEFAULT_IMG = '/assets/your_default_img' export default { props: { // 圖片地址 src: String, // 圖片加載中,以及加載失敗后的默認(rèn)地址 errSrc: { type: String, // 默認(rèn)是球隊圖標(biāo) default: DEFAULT_IMG, }, width: { type: String, default: '48rpx', }, height: { type: String, default: '48rpx', }, // 樣式字符串 styleStr: { type: String, default: '', }, // 圖片裁剪、縮放的模式(詳見文檔) imgMode: { type: String, default: 'scaleToFill', }, }, data () { return { imgSrc: '', isLoading: true, } }, computed: { // 樣式字符串 imgStyleStr () { return `width: ${this.width}; height: ${this.height}; ${this.styleStr}` }, }, methods: { // 加載圖片出錯 _onImageError (e) { this.imgSrc = this.errSrc this.$emit('onImageError', e) }, // 加載圖片完畢 _onImageLoad (e) { this.isLoading = false this.$emit('onImageLoad', e) }, }, } </script> <style lang="scss"> </style>
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)