用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序之addGlobalClass属性

Rolan 2021-1-13 13:37

本文主要是围绕着小程序的组件样式隔离去做说明.

小程序自定义组件的样式只会受到自定义组件wxss的影响, 除非以下几种情况:

A) app.wxss或者页面的wxss中使用了标签名选择器或其它一些特殊选择器.
Tips: 不推荐此种做法-> 会直接影响到页面和全部组件.

接下来结合Demo理解下这句话在说什么:

// 组件wxml
<text class="name">自定义组件</text>
// 组件wxss
.name{
  font-size: 30rpx;
}
text{
  color: red;
}

// 页面wxml -> 假定上述的组件名叫做test
<test></test>
<text>页面</text>
复制代码

先看看效果图:

你会发现, 页面的text标签内的文本也变成了红色, 就是因为受到了组件内申明的标签名选择器的影响, 这也是为什么我们不推荐此种做法的原因.

B) 指定特殊的样式隔离选项styleIsolation

// 组件wxml
<text class="test">自定义组件</text>
// 组件wxss
.test{
  color: blue;
}
// 组件js
Component({
  options: {
    styleIsolation: 'isolated'
  }
})

// 页面wxml
<test></test>
<text class="test">页面内容区</text>
// 页面wxss
.test{
  color: red;
}
复制代码

首先, 看看styleIsolation的值为isolated的效果图(默认属性值) 接下来, 把styleIsolation的值改为apply-shared, 看看效果: 你会发现, 页面wxss有作用于组件, 只是样式优先级导致未显示红色. 最后, 把styleIsolation的值改为shared, 看看效果: 你会发现, 页面wxss受到组件wxss的影响成了蓝色.

styleIsolation属性

A) isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值)
B) 'apply-shared'表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面 -> 大白话: 父亲会影响到孩子, 但孩子不会影响到父亲(单向)
C) shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)-> 大白话: 父子相互影响、成就彼此.

简写语法

注意: 以下两种写法2选一即可, 能实现同一效果.

// 基础写法:组件js options配置
Component({
  options: {
    styleIsolation: 'shared'
  }
})

// 升级写法: 组件json配置
{
  "component": true,
  "usingComponents": {},
  "styleIsolation": "shared"
}
复制代码

addGlobalClass属性

到了这里, 好像没看到任何跟标题有关的内容出现耶, 那么接下来我们就看看addGlobalClass属性.

// 基础写法:组件js options配置
Component({
  options: {
    styleIsolation: 'apply-shared'
  }
})

// 等价写法:
Component({
  options: {
    addGlobalClass: true
  }
})
复制代码

实际表现如上图apply-shared的效果图, 这里就不重复展示了.

总结: addGlobalClass: true等价于styleIsolation: apply-shared.

Tips: 若styleIsolation跟addGlobalClass同时存在时, 一方选项是失效哦, 需要注意.

最后

      前端知识点零散、需要多多记录总结~

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏