100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序自定义组件样式

微信小程序自定义组件样式

时间:2020-05-28 05:56:17

相关推荐

微信小程序自定义组件样式

一 组件样式隔离

默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的UI 结构。

组件 A 的样式不会影响组件 C 的样式

组件 A 的样式不会影响小程序页面的样式

小程序页面的样式不会影响组件 A 和 C 的样式

好处:

防止外界的样式影响组件内部的样式

防止组件的样式破坏外界的样式

二 组件样式隔离的注意点

app.wxss 中的全局样式对组件无效

只有 class 选择器会有样式隔离效果,id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议:在组件和引用组件的页面中建议使用 class 选择器,不要使用 id、属性、标签选择器!

三 修改组件的样式隔离选项

默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时,我们希望在外界能够控制组件内部的样式,此时,可以通过 styleIsolation 修改组件的样式隔离选项,用法如下。

//在组件的 .js文件中新增如下配置

Component({

options: {

styleIsolation: 'isolated'

}

})

//在组件的 .json文件中新增如下配置

{

styleIsolation: 'isolated'

}

四 styleIsolation 的可选值

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。