通常在前端展現圖片時都會碰到這兩個常見的需求:css
然鵝,小程序原生組件 image 並無提供這些經常使用功能...html
注:這裏加了 2s 的延遲
在小程序沒還沒推出自定義組件功能時,只能經過改變 Page 中的 data 來展現兜底的佔位圖,因此當時的處理方式十分蛋疼...前端
因爲須要知道這個圖片的數據路徑,因此不得不在每一個 image
上加上相似 data-img-path
的東西。vue
<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>
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, }) }, })
若是默認圖片不一樣呢?例如球員、球隊和 feed 的默認圖片通常都是不一樣的。git
那麼通常只好再增長一個屬性例如 data-img-type
來標識默認圖的類型。github
<!-- 球隊圖 --> <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], }) }, })
頁面層級淺倒還好,若是跨模板了,那麼模板就可能要用一個相似於 pathPrefix
的屬性來傳遞模板數據的路徑前綴。json
<!-- 球員排行模板 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>
最後在失敗回調裏調用 setData({ [path]: DEFAULT_IMG })
從新設置圖片地址。小程序
就問你蛋不蛋疼?這一坨 data-img-path="{{ pathPrefix }}.playerList[{{ itemIdx }}].imgSrc"
代碼真讓人無發可脫...微信小程序
有了自定義組件後,用領袖【竊·格瓦拉】的話來講的話就是:「感受好 door 了~」微信
原生寫法通常要寫4個文件:.json
/.wxml
/.js
/.wxss
{ "component": true }
<!-- 加載中的圖片 --> <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 }}" />
const DEFAULT_IMG = '/assets/your_default_img' Component({ properties: { // 圖片地址 src: String, // 圖片加載中,以及加載失敗後的默認地址 errSrc: { type: String, // 默認是球隊圖標 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) }, }, })
布吉島你們使用原生寫法時有木有一些感受不方便的地方:
.json
/.wxml
/.js
/.wxss
,這樣老須要切來切去的下降效率properties
是什麼鬼?你們(React/Vue)通常不都用 props
麼?style="width: {{ width }}; height: {{ height }}; {{ styleStr }}"
樣式字符串怎麼辣麼長...因此如下是一個使用單文件組件封裝原生 image 組件的例子。
computed
將樣式字符串寫在 js 中。this.imgSrc = this.errSrc
而不是 this.setData
來改變 data
。<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 */ // 也能夠設置爲網絡圖片如: https://foo/bar.png const DEFAULT_IMG = '/assets/your_default_img' export default { props: { // 圖片地址 src: String, // 圖片加載中,以及加載失敗後的默認地址 errSrc: { type: String, // 默認是球隊圖標 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>
採用框架是 tua-mp:
相關文章: