×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：组件模板和样式

组件模板和样式

解释：类似于页面，自定义组件拥有自己的 swan 模板和 css 样式。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了昌邑免费建站欢迎大家使用！

组件模板

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  组件内部节点
    4.   
  
  
  4.  
    5.   
  
  
    6.  
 
 
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  这里是插入到组件slot中的内容
    4.   
  
  
  4.  
    5.   
  
  
    6.

模板数据绑定

与普通的 SWAN 模板类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据。

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  这里是插入到组件slot中的内容
    4.   
  
  
  4.  
    5.   
  
  
    6.

在以上例子中，组件的属性 propA 和 propB 将收到页面传递的数据。页面可以通过 setData 来改变绑定的数据字段。

组件的 slot

解释：
在组件的视图模板中可以通过 slot 声明一个插槽的位置，其位置的内容可以由外层组件或者页面定义。

代码示例

 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  
    4.   
  
  
    5.  
 
 
 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  
    4.   
  
  
  4.  我是slot中插入的节点
    5.   
  
  
  5.  
    6.   
  
  
    7.

通过 name 属性可以给 slot 命名。一个视图模板的声明可以包含一个默认 slot 和多个命名 slot。外层组件或页面的元素通过 slot=”name” 的属性声明，可以指定自身的插入点。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
    5.  
 
 
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  我会被插入到组件上方
    4.   
  
  
  4.  我会被插入到组件下方
    5.   
  
  
  5.  
    6.   
  
  
    7.

slot 指令应用

解释：
在 slot 声明时应用 if 或 for 指令，可以让插槽根据组件数据动态化。
代码示例

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
    4.

数据环境

解释：
插入 slot 部分的内容，其数据环境为声明时的环境。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  
    4.   
  
  
    5.  
 
 
 
 
 
    
  
  
  
  1. Component({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  name: 'swan-inner'
    4.   
  
  
  4.  }
    5.   
  
  
  5. });
    6.  
 
 
 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  
    4.   
  
  
  4.  {{name}}
    5.   
  
  
  5.  
    6.   
  
  
    7.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  name: 'swan-outer'
    4.   
  
  
  4.  }
    5.   
  
  
  5. });
    6.

渲染结果：

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  swan-outer
    4.   
  
  
  4.  
    5.   
  
  
    6.

slot 插槽

解释：

如果 slot 声明中包含 s-bind 或 1 个以上 var- 数据前缀声明，该 slot 为 scoped slot。scoped slot 具有独立的数据环境。 scoped slot 通常用于组件的视图部分期望由外部传入视图结构，渲染过程使用组件内部数据。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  
    4.   
  
  
    5.  
 
 
 
 
 
    
  
  
  
  1. Component({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  name: 'swan-inner'
    4.   
  
  
  4.  }
    5.   
  
  
  5. });
    6.  
 
 
 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  
    4.   
  
  
  4.  {{name}}
    5.   
  
  
  5.  
    6.   
  
  
    7.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  name: 'swan-outer'
    4.   
  
  
  4.  }
    5.   
  
  
  5. });
    6.

渲染结果：

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  swan-inner
    4.   
  
  
  4.  
    5.   
  
  
    6.

组件样式

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

组件的样式，可以在组件的 css 文件中编写，并且只对当前组件内节点生效。使用时，需要注意以下几点：

  1. 只可以使用 class 选择器，其他的选择器，请改为 class 选择器实现；
  2. 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用；
  3. 继承样式，如 font 、 color，会从组件外继承到组件内。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  这里是组件的内部节点
    4.   
  
  
    5.

外部样式类

解释：

当组件希望接受外部传入的样式类（类似于 view 组件的 hover-class 属性）时，可以在 Component 中用 externalClasses 字段定义若干个外部样式类。 > 小程序基础库版本 1.13.29 开始支持。

注意：在同一个节点上使用普通样式类和外部样式类时，请避免出现两个类的优先级是未定义的情况。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
  1. /* 组件 custom-component.js */
    2.   
  
  
  2. Component({
    3.   
  
  
  3.  externalClasses: ['external-class']
    4.   
  
  
  4. });
    5.  
 
 
 
 
 
    
  
  
  
    2.   
  
  
  2. 这段文本的颜色由组件外的 class 决定
    3.

组件的使用者可以像使用其他属性一样，指定这个样式类对应的 class 。

 
 
 
    
  
  
  
    2.   
  
  
    3.  
 
 
 
 
 
    
  
  
  
  1. .red-text {
    2.   
  
  
  2.  color: red;
    3.   
  
  
  3. }
    4.

同时，可以支持指定多个对应的 class 。

代码示例

 
 
 
    
  
  
  
    2.   
  
  
    3.

全局样式类

解释：

使用外部样式类可以让组件使用指定的组件外样式类，如果希望组件外样式类能够完全影响组件内部，可以将组件构造器中的options.addGlobalClass字段置为true。 > 小程序基础库版本 1.13.29 开始支持。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
  1. /* 组件 custom-component.js */
    2.   
  
  
  2. Component({
    3.   
  
  
  3.  options: {
    4.   
  
  
  4.  addGlobalClass: true,
    5.   
  
  
  5.  }
    6.   
  
  
  6. });
    7.  
 
 
 
 
 
    
  
  
  
    2.   
  
  
  2. 这段文本的颜色由组件外的 class 决定
    3.  
 
 
 
 
 
    
  
  
  
  1. /* 组件外的样式定义 */
    2.   
  
  
  2. .global-class {
    3.   
  
  
  3.  color: red;
    4.   
  
  
  4. }
    5.

常见问题

Q：使用自定义组件时，如何设置胶囊字体颜色

A：请在 page 的 json 文件中设置 navigationBarTextStyle 。


本文标题：创新互联百度小程序教程：组件模板和样式
转载注明：http://cdbrznjsb.com/article/djopsjs.html

其他资讯

让你的专属顾问为你服务