小程序组件样式

374 阅读1分钟

小程序组件化开发

使用自定义组件有一些需要注意的细节:自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用usingComponents 字段)。自定义组件和页面所在项目根目录名 不能以“wx-”为前缀,否则会报错。如果在app.json的usingComponents声明某个组件,那么所有页面和组件可以直接使用该组件。

组件的样式细节

(1)组件内的样式对外部样式的影响 组件内的class样式,只对组件wxml内的节点生效, 对于引用组件的Page页面不生效。组件内不能使用id选择器、属性选择器、标签选择器。

(2)外部样式对组件内样式的影响

外部使用class的样式,只对外部wxml的class生效,对组件内是不生效的。外部使用了id选择器、属性选择器不会对组件内产生影响。外部使用了标签选择器,会对组件内产生影响。

(3)如何让class可以相互影响 在Component对象中,可以传入一个options属性,其中options属性中有一个styleIsolation(隔离)属性。styleIsolation有三个取值:isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(默认取值)。apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面。shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置。