问题:
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啦