新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：組件模板和樣式

組件模板和樣式
- 組件模板
- 模板數(shù)據(jù)綁定
- 組件的 slot
  - slot 指令應(yīng)用
  - 數(shù)據(jù)環(huán)境
  - slot 插槽
- 組件樣式
- 外部樣式類
- 全局樣式類
常見問題
- Q：使用自定義組件時，如何設(shè)置膠囊字體顏色

組件模板和樣式

解釋：類似于頁面，自定義組件擁有自己的 swan 模板和 css 樣式。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了昌邑免費建站歡迎大家使用！

組件模板

組件模板的寫法與頁面模板相同。組件模板與組件數(shù)據(jù)結(jié)合后生成的節(jié)點樹，將被插入到組件的引用位置上。

在組件模板中可以提供一個節(jié)點，用于承載組件引用時提供的子節(jié)點。

代碼示例

在開發(fā)者工具中打開

在 WEB IDE 中打開

 
 
 
  
  
    
  
    
  
   組件內(nèi)部節(jié)點

 
 
 
  
  
    
  
     
  
   這里是插入到組件slot中的內(nèi)容

模板數(shù)據(jù)綁定

與普通的 SWAN 模板類似，可以使用數(shù)據(jù)綁定，這樣就可以向子組件的屬性傳遞動態(tài)數(shù)據(jù)。

 
 
 
  
  
    
  
     
  
   這里是插入到組件slot中的內(nèi)容

在以上例子中，組件的屬性 propA 和 propB 將收到頁面?zhèn)鬟f的數(shù)據(jù)。頁面可以通過 setData 來改變綁定的數(shù)據(jù)字段。

組件的 slot

解釋：
在組件的視圖模板中可以通過 slot 聲明一個插槽的位置，其位置的內(nèi)容可以由外層組件或者頁面定義。

代碼示例

 
 
 
  
  
    
  
    
  
     
  
   我是slot中插入的節(jié)點

通過 name 屬性可以給 slot 命名。一個視圖模板的聲明可以包含一個默認 slot 和多個命名 slot。外層組件或頁面的元素通過 slot=”name” 的屬性聲明，可以指定自身的插入點。

代碼示例

在開發(fā)者工具中打開

在 WEB IDE 中打開

 
 
 
  
  
    
  
     
  
   我會被插入到組件上方  
  
   我會被插入到組件下方

slot 指令應(yīng)用

解釋：
在 slot 聲明時應(yīng)用 if 或 for 指令，可以讓插槽根據(jù)組件數(shù)據(jù)動態(tài)化。
代碼示例

數(shù)據(jù)環(huán)境

解釋：
插入 slot 部分的內(nèi)容，其數(shù)據(jù)環(huán)境為聲明時的環(huán)境。

代碼示例

在開發(fā)者工具中打開

在 WEB IDE 中打開

SWAN
JS
SWAN
JS

 
 
 
  
  
  Component({  
  
   data: {  
  
   name: 'swan-inner'  
  
   }  
  
  });

 
 
 
  
  
  Page({  
  
   data: {  
  
   name: 'swan-outer'  
  
   }  
  
  });

渲染結(jié)果：

 
 
 
  
  
    
  
     
  
   swan-outer

slot 插槽

解釋：

如果 slot 聲明中包含 s-bind 或 1 個以上 var- 數(shù)據(jù)前綴聲明，該 slot 為 scoped slot。scoped slot 具有獨立的數(shù)據(jù)環(huán)境。 scoped slot 通常用于組件的視圖部分期望由外部傳入視圖結(jié)構(gòu)，渲染過程使用組件內(nèi)部數(shù)據(jù)。

代碼示例

在開發(fā)者工具中打開

在 WEB IDE 中打開

SWAN
JS

 
 
 
  
  
  Component({  
  
   data: {  
  
   name: 'swan-inner'  
  
   }  
  
  });

SWAN
JS

 
 
 
  
  
  Page({  
  
   data: {  
  
   name: 'swan-outer'  
  
   }  
  
  });

渲染結(jié)果：

 
 
 
  
  
    
  
     
  
   swan-inner

組件樣式

代碼示例

在開發(fā)者工具中打開

在 WEB IDE 中打開

組件的樣式，可以在組件的 css 文件中編寫，并且只對當前組件內(nèi)節(jié)點生效。使用時，需要注意以下幾點：

只可以使用 class 選擇器，其他的選擇器，請改為 class 選擇器實現(xiàn)；
組件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會有非預(yù)期的表現(xiàn)，如遇，請避免使用；
繼承樣式，如 font 、 color，會從組件外繼承到組件內(nèi)。

代碼示例

在開發(fā)者工具中打開

在 WEB IDE 中打開

SWAN

 
 
 
  
  
    
  
    
  
   這里是組件的內(nèi)部節(jié)點

外部樣式類

解釋：

當組件希望接受外部傳入的樣式類（類似于 view 組件的 hover-class 屬性）時，可以在 Component 中用 externalClasses 字段定義若干個外部樣式類。 > 小程序基礎(chǔ)庫版本 1.13.29 開始支持。

注意：在同一個節(jié)點上使用普通樣式類和外部樣式類時，請避免出現(xiàn)兩個類的優(yōu)先級是未定義的情況。

代碼示例

在開發(fā)者工具中打開

在 WEB IDE 中打開

JS
SWAN

 
 
 
  
  
  /* 組件 custom-component.js */  
  
  Component({  
  
   externalClasses: ['external-class']  
  
  });

 
 
 
  
  
    
  
  這段文本的顏色由組件外的 class 決定

組件的使用者可以像使用其他屬性一樣，指定這個樣式類對應(yīng)的 class 。

SWAN
CSS

 
 
 
  
  
  .red-text {  
  
   color: red;  
  
  }

同時，可以支持指定多個對應(yīng)的 class 。

代碼示例

SWAN

全局樣式類

解釋：

使用外部樣式類可以讓組件使用指定的組件外樣式類，如果希望組件外樣式類能夠完全影響組件內(nèi)部，可以將組件構(gòu)造器中的options.addGlobalClass字段置為true。 > 小程序基礎(chǔ)庫版本 1.13.29 開始支持。

代碼示例

在開發(fā)者工具中打開

在 WEB IDE 中打開

JS
SWAN
CSS

 
 
 
  
  
  /* 組件 custom-component.js */  
  
  Component({  
  
   options: {  
  
   addGlobalClass: true,  
  
   }  
  
  });

 
 
 
  
  
    
  
  這段文本的顏色由組件外的 class 決定

 
 
 
  
  
  /* 組件外的樣式定義 */  
  
  .global-class {  
  
   color: red;  
  
  }

常見問題

Q：使用自定義組件時，如何設(shè)置膠囊字體顏色

A：請在 page 的 json 文件中設(shè)置 navigationBarTextStyle 。

文章題目：創(chuàng)新互聯(lián)百度小程序教程：組件模板和樣式
瀏覽路徑：http://fisionsoft.com.cn/article/djopsjs.html

新聞中心

組件模板和樣式

組件模板

模板數(shù)據(jù)綁定

組件的 slot

slot 指令應(yīng)用

數(shù)據(jù)環(huán)境

slot 插槽

組件樣式

外部樣式類

全局樣式類

常見問題

Q：使用自定義組件時，如何設(shè)置膠囊字體顏色

其他資訊

Q：使用自定義組件時，如何設(shè)置膠囊字體顏色