微信小程序微信小程序开发微信小程序开发者

微信小程序自定义组件中传入父层class样式

2018-10-14  本文已影响7人  7db2b8912e6d

有时候我们有这一种需求:在使用组件的时候,希望能传入自己写的class样式。

测试了一番,直接传递class参数是无效的,那我们怎么做呢?

开始实践

仔细查阅了官方文档,发现是可以的。

我们首先在组件的js文件中加入externalClasses数组变量,用于定义我们要传递的父层class名称:

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})

然后,组件的wxml中使用class="my-class"来使父层样式生效:

<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

最后,我们在页面中使用组件的时候,直接用my-class传递页面的wxss样式名称就好:

<!-- 页面的 WXML -->
<custom-component my-class="red-text" />
上一篇 下一篇

猜你喜欢

热点阅读