百度智能小程序 組件模板和樣式

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

組件模板

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

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

代碼示例 

<!-- 組件內(nèi)部模板 -->
<view class="wrapper">
    <view>組件內(nèi)部節(jié)點</view>
    <slot></slot>
</view>

<view>
    <custom-component>
        <view>這里是插入到組件slot中的內(nèi)容</view>
    </custom-component>
</view>

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

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

<view>
    <custom-component prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
        <view>這里是插入到組件slot中的內(nèi)容</view>
    </custom-component>
</view>

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

組件的 slot

解釋:

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

代碼示例

<!-- 組件中的定義 -->
<view>
    <slot></slot>
</view>

<!-- 使用組件的頁面或者組件 -->
<view>
    <custom-component>
        <view>我是slot中插入的節(jié)點</view>
    </custom-component>
</view>

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

代碼示例 

<view>
    <slot name="slot1"></slot>
    <slot name="slot2"></slot>
</view>

<view>
    <custom-component>
        <view slot="slot1">我會被插入到組件上方</view>
        <view slot="slot2">我會被插入到組件下方</view>
    </custom-component>
</view>

slot 指令應(yīng)用

解釋：

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

代碼示例

<view>
    <slot s-if="!visible" name="subcomponent"></slot>
</view>

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

解釋：

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

代碼示例 

<!-- custom-component自定義組件 -->
<view class="component-range">
    <slot name="inner"></slot>
</view>

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

<!-- 使用組件的頁面或者組件 -->
<view>
    <custom-component>
        <view>{{name}}</view>
    </custom-component>
</view>

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

渲染結(jié)果：

<view>
    <view class="component-range">
        <view>swan-outer</view>
    </view>
</view>

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ù)。

代碼示例 

<!-- custom-component自定義組件 -->
<view class="component-range">
    <slot name="inner" var-name="name"></slot>
</view>

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

<!-- 使用組件的頁面或者組件 -->
<view>
    <custom-component>
        <view>{{name}}</view>
    </custom-component>
</view>

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

渲染結(jié)果：

<view>
    <view class="component-range">
        <view>swan-inner</view>
    </view>
</view>

組件樣式

代碼示例 

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

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

代碼示例 

<!-- custom-component自定義組件 -->
<view class="wrapper wrapperTwo">
     <view>這里是組件的內(nèi)部節(jié)點</view>
</view>

外部樣式類

解釋：

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

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

代碼示例 

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

<!-- 組件 custom-component.swan -->
<view class="external-class">這段文本的顏色由組件外的 class 決定</view>

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

<!-- 使用組件的頁面或者組件 -->
<custom-component external-class="red-text" />

.red-text {
    color: red;
}

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

代碼示例

<!-- 使用組件的頁面或者組件 -->
<my-component my-class="red-text bg-color" />

全局樣式類

解釋：

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

代碼示例 

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

<!-- 組件 custom-component.swan -->
<text class="global-class">這段文本的顏色由組件外的 class 決定</text>

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

常見問題

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

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