国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序之如何使用自定義組件封裝原生 image 組件

cnTomato / 3021人閱讀

摘要：假如圖片鏈接有問題比如，依然展示占位圖。使用單文件組件將配置模板腳本樣式寫在一個文件中，方便維護。

零、問題的由來

一般在前端展示圖片時都會碰到這兩個常見的需求：

圖片未加載完成時先展示占位圖，等到圖片加載完畢后再展示實際的圖片。

假如圖片鏈接有問題（比如 404），依然展示占位圖。甚至你還可以增加點擊圖片再次加載的功能。（例如知乎）

然鵝，小程序原生組件 image 并沒有提供這些常用功能...

注：這里加了 2s 的延遲
一、常規(guī)操作

在小程序沒還沒推出自定義組件功能時，只能通過改變 Page 中的 data 來展示兜底的占位圖，所以當(dāng)時的處理方式十分蛋疼...

1.1.相同默認(rèn)圖

由于需要知道這個圖片的數(shù)據(jù)路徑，所以不得不在每個 image 上加上類似 data-img-path 的東西。


    

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.不同默認(rèn)圖

如果默認(rèn)圖片不同呢？例如球員、球隊和 feed 的默認(rèn)圖片一般都是不同的。

那么一般只好再增加一個屬性例如 data-img-type 來標(biāo)識默認(rèn)圖的類型。





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 的屬性來傳遞模板數(shù)據(jù)的路徑前綴。

最后在失敗回調(diào)里調(diào)用 setData({ [path]: DEFAULT_IMG }) 重新設(shè)置圖片地址。

就問你蛋不蛋疼？這一坨 data-img-path="{{ pathPrefix }}.playerList[{{ itemIdx }}].imgSrc" 代碼真讓人無發(fā)可脫...

二、自定義組件

有了自定義組件后，用領(lǐng)袖【竊·格瓦拉】的話來說的話就是：“感覺好 door 了~”

2.1.原生自定義組件

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

TuaImage.json

{
    "component": true
}

TuaImage.wxml

TuaImage.js

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)
        },
    },
})

布吉島大家使用原生寫法時有木有一些感覺不方便的地方：

4個文件：.json/.wxml/.js/.wxss，這樣老需要切來切去的降低效率

properties 是什么鬼？大家（React/Vue）一般不都用 props 么？

style="width: {{ width }}; height: {{ height }}; {{ styleStr }}" 樣式字符串怎么辣么長...

2.2.TuaImage.vue

所以以下是一個使用單文件組件封裝原生 image 組件的例子。

使用單文件組件將配置、模板、腳本、樣式寫在一個文件中，方便維護。

使用計算屬性 computed 將樣式字符串寫在 js 中。

使用 this.imgSrc = this.errSrc 而不是 this.setData 來改變 data。


{
    "component": true
}

采用框架是 tua-mp：

github 源碼地址

相關(guān)文章：

終極蛇皮上帝視角之微信小程序之告別 setData

終極蛇皮上帝視角之微信小程序之告別“刀耕火種”

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96868.html

相關(guān)文章

  • 微信小程序開發(fā)中的二三事之網(wǎng)易云信IMSDK DEMO

    摘要：傳統(tǒng)的網(wǎng)頁編程采用的三劍客來實現(xiàn)，在微信小程序中同樣有三劍客。觀察者模式不難實現(xiàn)，重點是如何在微信小程序中搭配其特有的生命周期來使用。交互事件傳統(tǒng)的事件傳遞類型有冒泡型與捕獲型，微信小程序中自然也有。 本文由作者鄒永勝授權(quán)網(wǎng)易云社區(qū)發(fā)布。 簡介為了更好的展示我們即時通訊SDK強悍的能力，網(wǎng)易云信IM SDK微信小程序DEMO的開發(fā)就提上了日程。用產(chǎn)品的話說就是: 云信 IM 小程序 S...

    weij 評論0 收藏0

  • 「輕算賬」小程序實踐筆記

    摘要：資源開發(fā)文檔是一套完全免費的微信小程序開發(fā)框架，擴展了小程序的能力。推薦有一些不錯的解決方案封裝封裝跨頁面事件通訊監(jiān)聽數(shù)據(jù)變化開發(fā)如何在微信小程序的頁面間傳遞數(shù)據(jù)需要時可以快速過一遍。微信小程序回調(diào)，，，的使用例子供參考 這篇文章主要記錄我做小程序「輕算賬」過程中遇到的一些問題和解決方案，就當(dāng)是做個總結(jié)，也希望其中有能夠幫助到他人的信息。 showImg(https://segment...

    BigTomato 評論0 收藏0

  • 微信小程序 bug 集中營

    摘要：利用這篇教程存儲一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內(nèi)的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...

    he_xd 評論0 收藏0

  • 微信小程序 bug 集中營

    摘要：利用這篇教程存儲一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內(nèi)的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...

    PascalXie 評論0 收藏0

  • 微信小程序 bug 集中營

    摘要：利用這篇教程存儲一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內(nèi)的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...

    lordharrd 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<