使用externalClass自定義組件樣式:解決小程序自定義組件無法使用iconfont的問題


問題:

  iconfont在全局、頁面Page當中,這個iconfont是都可以出來的;

  但是在自定義組件Components里面,這個iconfont是出不來的。

問題原因:

  看了小程序的文檔,才發現

  也就是說:組件中,app.wxss中的全局樣式無效;把iconfont的css在組件中重新引入就能正常展示icon了。

  其實是全局的樣式對自定義的組件無效

  重新引入組件文件的解決方式有點low,所以繼續看文檔

  可以使用externalClass自定義組件樣式

  看官方文檔,萬變不離其宗。官方文檔就是最基本的游戲規則,我們可以根據官方的示例,照葫蘆畫瓢,實現我們自己的功能。

  實踐:

  組件內聲明externalClasses,

Component({ properties: { link: { type: Object, value: {} } }, externalClasses: ['icon-class'] })
<i class="icon-class"></i>

  父組件傳入class

<LinkModel wx:if="{{dt.link}}" icon-class="iconfont cs-link"
link="{{tools.jsonToObj(dt.link)}}"></LinkModel>

  這樣就ok啦


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM