专栏首页天天微信小程序 自定义组件样式
原创

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

看官方文档

组件样式

组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:

  1. 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
  2. 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
  3. 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
  4. 继承样式,如 font 、 color ,会从组件外继承到组件内。

除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */

除此以外,组件可以指定它所在节点的默认样式,使用:host选择器

<!-- 组件 custom-component.wxss -->

:host {
 font-size:64rpx;
 text-decoration: underline;
}
.inner-title{
 font-size:48rpx;
 line-height:1.8em;
}

使用外部样式,例如index页面引用 组件,使用index.wxss中的某些样式

 <!-- 组件 custom-component.js -->
 Component({
  ...
  externalClasses: ['outer-title','bolded'],//可以传入多个class
  ...
 })
 <!-- 组件 custom-component.wxml -->
<custom-component>
  <view class='outer-title bolded'>{{myProperty}}</view>
  ...
</custom-component>



<!-- 页面 index.wxml -->
<my-component my-property="{{txt}}" bindmyevent='change' outer-title ='outer' bolded ='bolder'/>

<!-- 页面 index.wxss -->
.outer{
 color:orange;
 text-align: center;
}
.bolder{
 font-weight:bolder;
}

全局样式

对于官方文档的实例,好像不生效,而且文档也介绍说:

当开放了全局样式类,存在外部样式污染组件样式的风险,请谨慎选择。

目前不深入研究,知道了解的大神留言指正

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序中自定义组件solt的使用

    我们会发现,在自定义模板中有一对<code><slot></slot></code>,这里是干什么用的呢?在组件模板中可以提供一个 <slot> 节点,用于承载...

    天天_哥
  • 微信小程序 页面与自定义组件数据通信

    说明:页面通过my-property讲example字符串传递给自定义组件,同样也可以使用数据绑定的方法

    天天_哥
  • 微信小程序中自定义组件的使用

    在开发过程中,加入有这样一种场景,就是在开发的过程中,我们一直要使用一些相同或者类似的结构,我们就可以自定义模块,方便使用,以及后期的维护,了解vue的同学就知...

    天天_哥
  • 小程序 组件 Component

    <v-component prop-a="{{dataA}}" prop-b="{{dataB}}">

    用户1197315
  • 开发 | 减少一半工作量!有了这个「轮子」,小程序 UI 搭建超简单

    前段时间,微信低调地推出了小程序「自定义组件」能力。这个能力允许开发者,根据实际需要创建自定义组件,并在小程序中使用。

    知晓君
  • Element组件引发的Vue中mixins使用,写出高复用组件

    版权声明:本文为原创文章首发于公众号:六小登登 , 你可以随意转载但请务必注明出处!!!关注微信公众...

    六小登登
  • Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)

    当我们在书写 vue 组件的时候,也许可能会用到数据传递;将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件;

    sunseekers
  • 微信小程序组件化编程和实践(上)

    从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。查看自己使用的小程序基础库版本,可以通过在开发者工具右侧点击详情查看:

    疯狂的小程序
  • 5、Java Swing布局管理器(FlowLayout、BorderLayout、CardLayout、BoxLayout、GirdBagLayout 和 GirdLayout)

    5、Java-Swing常用布局管理器       应用布局管理器都属于相对布局,各组件位置可随界面大小而相应改变,不变的只是其相对位置,布局管理器比较难以控制...

    YGingko
  • 微信小程序自定义组件

    其中,components为组件目录,nodemodules为模块目录,pages为小程序的页面目录,utils为一些基础功能的封装。好比安装的第三方百度统计功...

    mySoul

扫码关注云+社区

领取腾讯云代金券