• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序自定义组件笔记-组件模板和样式

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

组件拥有自己的 wxml 模板和 wxss 样式

组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点

 

 

<!-- 组件模板 -->

<view class="wrapper">

  <view>这里是组件的内部节点</view>

  <slot></slot>

</view>

 

<!-- 引用组件的页面模板 -->

<view>

  <component-tag-name>

    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->

    <view>这里是插入到组件slot中的内容</view>

  </component-tag-name>

</view>

默认情况下,一个组件的wxml中只能有一个slot。需要使用多slot时,可以在组件js中声明启用。

Component({

  options: {

    multipleSlots: true // 在组件定义时的选项中启用多slot支持

  },

/*…*/

})

在这个组件的wxml中使用多个slot,以不同的 name 来区分。

<!-- 组件模板 -->

<view class="wrapper">

  <slot name="before"></slot>

  <view>这里是组件的内部细节</view>

  <slot name="after"></slot>

</view>

 

 

 

 

 

 

 

 

使用

<!-- 引用组件的页面模板 -->

<view>

  <component-tag-name>

    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->

    <view slot="before">这里是插入到组件slot name="before"中的内容</view>

    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->

    <view slot="after">这里是插入到组件slot name="after"中的内容</view>

  </component-tag-name>

</view>

 

 

 

 

页面模板引用自定义组件及其对应的节点名需要在 json 文件中显式定义

 

 

数据绑定,这样就可以向子组件的属性传递动态数据。

<!-- 引用组件的页面模板 -->

<view>

  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">

  </component-tag-name>

</view>

只能传递 JSON 兼容数据。自基础库版本 2.0.9 开始,还可以在数据中包含函数

 

 

组件样式

只对组件wxml内的节点生效,注意

不能使用 id选择器 #a 属性选择器[a] button(标签选择器)

避免使用代选择器 .a .b

.a > .b 除非 .a <view> ,否则不一定会生效

继承样式,如 font  color ,会从组件外继承到组件内。

除继承样式外, app.wxss 样式、页面样式对自定义组件无效(除非更改隔离选项)。

 :host 指定所在节点样式。

 

样式隔离

默认自定义组件的样式只受自身 wxss 影响,除非:

app.wxss 或页面 wxss 中使用了标签名选择器(或一些其他特殊选择器),不推荐。

指定样式隔离选项 styleIsolation 

Component({

  options: {

    styleIsolation: \'isolated\'

  }

})

或在.json文件中:

{

  "styleIsolation": "isolated"

}

 

isolated (默认值) class 指定的样式将不会相互影响

apply-shared 页面影响自定义组件,自定义组件不影响页面;

shared 页面影响自定义组件,自定义组件影响页面和 其他 apply-shared  shared 的自定义组件。(插件不可用)。

 

Component 构造器用于构造页面 额外的样式隔离选项可用:

page-isolated 完成隔离

page-apply-shared 只会受shared自定义组件影响

page-shared 会影响apply-sharedshared自定义组件,会受shared自定义组件影响。

 

addGlobalClass: true  等阶于 styleIsolation: \'isolated\'

 

 

 

 

 

 

 

 

 

 

 

外部样式类

接受外部传入的样式类

注意:同一节点使用普通样式类和外部样式类时,两个类的优先级是未定义的,避免这种情况。

/* 组件 custom-component.js */

Component({

  externalClasses: [\'my-class\']

})

 

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

<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

 

<!-- 页面的 WXML -->

<custom-component my-class="red-text" />

<custom-component my-class="large-text" />

<!-- 以下写法需要基础库版本 2.7.1 以上 -->

<custom-component my-class="red-text large-text" />

 

.red-text {

  color: red;

}

.large-text {

  font-size: 1.5em;

}

 

引用页面或父组件的样式

即使启用了样式隔离 isolated,仍可以引用

引用页面中的class

<view class="~blue-text"> 引用页面的样式类 </view>

 

引用父组件中的class:

<view class="^red-text"> 引用父组件的样式类 </view>

<view class="^^red-text"> 引用祖父组件的样式类 </view>

 

独立、通用的组件,请优先使用外部样式类


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap