問題:
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啦