使用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