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

  • 组件模板和样式
    • 组件模板
    • 模板数据绑定
    • 组件的 slot
      • slot 指令应用
      • 数据环境
      • slot 插槽
    • 组件样式
    • 外部样式类
    • 全局样式类
  • 常见问题
    • Q：使用自定义组件时，如何设置胶囊字体颜色

    组件模板和样式

    解释：类似于页面，自定义组件拥有自己的 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 中打开

    • SWAN
    • JS
    • SWAN
    • JS
     
 
 
      
  
  
  
      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 中打开

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
      3.   
  
  
    3.  
      4.   
  
  
      5.  
 
 
     
 
 
      
  
  
  
    1. Component({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  name: 'swan-inner'
      4.   
  
  
    4.  }
      5.   
  
  
    5. });
      6.
    • SWAN
    • JS
     
 
 
      
  
  
  
      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 中打开

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

    外部样式类

    解释：

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

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

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

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

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

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

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

    代码示例

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
      3.

    全局样式类

    解释：

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

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JS
    • SWAN
    • CSS
     
 
 
      
  
  
  
    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://www.shufengxianlan.com/qtweb/news29/218729.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    ChatGPT知识

    分类信息网站

    电信机房托管　　 　成都网站优化　　 　成都网站运营维护　　 　网站推广　　 　成都云主机　　 　成都恒翔机电维修　　 　网站运营　　 　大橙子建站　　 　三台网站建设　　 　手机网站版本　　 　网站seo　　 　南充电信机房托管　　 　达州电信机房　　 　艾瑞格衣柜　　 　成都酒店服定制　　 　虚拟主机　　 　网站建设公司　　 　广告品牌策划设计　　 　成都营销网站建设　　 　app开发