自定义组件②样式-微信小程序开发(十九)
2022/8/14 1:25:23
本文主要是介绍自定义组件②样式-微信小程序开发(十九),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. 组件样式隔离
默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的
UI 结构,如图所示:
⚫ 组件 A 的样式不会影响组件 C 的样式
⚫ 组件 A 的样式不会影响小程序页面的样式
⚫ 小程序页面的样式不会影响组件 A 和 C 的样式
好处:
① 防止外界的样式影响组件内部的样式
② 防止组件的样式破坏外界的样式
2. 组件样式隔离的注意点
⚫ app.wxss 中的全局样式对组件无效
⚫ 只有 class 选择器会有样式隔离效果,id 选择器、属性选择器、标签选择器不受样式隔离的影响
建议:在组件和引用组件的页面中建议使用 class 选择器,不要使用 id、属性、标签选择器!
3. 修改组件的样式隔离选项
默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时,我们希望在外界能
够控制组件内部的样式,此时,可以通过 styleIsolation 修改组件的样式隔离选项,用法如下:
//在组件的 .js文件中,新增如下配置 Component({ options:{ styleIsolation:'isolated' } }) //或在组件的 .json文件中,新增如下配置 { "styleIsolation":"isolated" }
4. styleIsolation 的可选值
这篇关于自定义组件②样式-微信小程序开发(十九)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具
- 2023-11-1952天学习微信小程序计划No.1:小程序简介