日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：組件模板和樣式
  • 組件模板和樣式
    • 組件模板
    • 模板數(shù)據(jù)綁定
    • 組件的 slot
      • slot 指令應用
      • 數(shù)據(jù)環(huán)境
      • slot 插槽
    • 組件樣式
    • 外部樣式類
    • 全局樣式類
  • 常見問題
    • Q：使用自定義組件時，如何設置膠囊字體顏色

    組件模板和樣式

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

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

    組件模板

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

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

    代碼示例

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

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

    在 WEB IDE 中打開

     
 
 
      
  
  
  
      2.   
  
  
      3.   
  
  
    3.  組件內部節(jié)點
      4.   
  
  
    4.  
      5.   
  
  
      6.  
 
 
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  這里是插入到組件slot中的內容
      4.   
  
  
    4.  
      5.   
  
  
      6.

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

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

     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  這里是插入到組件slot中的內容
      4.   
  
  
    4.  
      5.   
  
  
      6.

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

    組件的 slot

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

    代碼示例

     
 
 
      
  
  
  
      2.   
  
  
      3.   
  
  
    3.  
      4.   
  
  
      5.  
 
 
     
 
 
      
  
  
  
      2.   
  
  
      3.   
  
  
    3.  
      4.   
  
  
    4.  我是slot中插入的節(jié)點
      5.   
  
  
    5.  
      6.   
  
  
      7.

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

    代碼示例

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

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

    在 WEB IDE 中打開

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

    slot 指令應用

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

     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
      4.

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

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

    代碼示例

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

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

    在 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- 數(shù)據(jù)前綴聲明，該 slot 為 scoped slot。scoped slot 具有獨立的數(shù)據(jù)環(huán)境。 scoped slot 通常用于組件的視圖部分期望由外部傳入視圖結構，渲染過程使用組件內部數(shù)據(jù)。

    代碼示例

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

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

    在 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.

    組件樣式

    代碼示例

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

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

    在 WEB IDE 中打開

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

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

    代碼示例

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

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

    在 WEB IDE 中打開

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
      3.   
  
  
    3.  這里是組件的內部節(jié)點
      4.   
  
  
      5.

    外部樣式類

    解釋：

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

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

    代碼示例

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

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

    在 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 開始支持。

    代碼示例

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

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

    在 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 。


    標題名稱：創(chuàng)新互聯(lián)百度小程序教程：組件模板和樣式
    當前網(wǎng)址：http://www.dlmjj.cn/article/djopsjs.html