小程式 元件功能簡記 元件模板與樣式

2021-09-28 23:26:00 字數 1802 閱讀 3521

1.在json檔案輸入定義檔案當前為元件

2.宣告元件後可在.wxml–wxss中編寫內容

3.元件中樣式檔案只應用與當前元件

4.元件wxss中不應使用id選擇器、屬性選擇器、標籤選擇器

5.自定義元件js檔案中,需要使用component()來註冊元件,來提供元件的屬性定義,內部資料和自定義方法

component(

},data:

},methods:

}})

1.某個頁面需要使用元件前,需要在json檔案中進行宣告引用元件。

}

2.在wxml中就可以像基礎元件一樣使用自定義元件:《名稱》提供子節點,用於使用元件過程中提供子節點

這裡是插入到元件slot中的內容

注意:預設情況下元件中只能有乙個slot節點,需要使用多個slot時,可以在json檔案中宣告

component(,

})這裡是元件的內部細節

這裡是插入到元件slot name="before"中的內容

這裡是插入到元件slot name="after"中的內容

注意:元件樣式只在對應的元件中生效。編寫元件樣式時,需注意:

元件對應 wxss 檔案的樣式,只對元件wxml內的節點生效。編寫元件樣式時,需要注意以下幾點:

1).元件和引用元件的頁面不能使用id選擇器(#a)、屬性選擇器([a])和標籤名選擇器,請改用class選擇器。

2).元件和引用元件的頁面中使用後代選擇器(.a .b)在一些極端情況下會有非預期的表現,如遇,請避免使用。

4).子元素選擇器(.a>.b)只能用於 view 元件與其子節點之間,用於其他元件可能導致非預期的情況。

5).繼承樣式,如 font 、 color ,會從元件外繼承到元件內。

#a /* 在元件中不能使用 */

[a] /* 在元件中不能使用 */

button /* 在元件中不能使用 */

.a > .b /* 除非 .a 是 view 元件節點,否則不一定會生效 */

元件樣式隔離:

預設情況下,自定義元件的樣式只受到自定義元件 wxss 的影響。除非以下兩種情況:

component(

})//isolated 表示啟用樣式隔離,在自定義元件內外,使用 class 指定的樣式將不會相互影響(一般情況下的預設值);

//使用後兩者時,請務必注意元件間樣式的相互影響。

外部樣式:

有時,元件希望接受外部傳入的樣式類。此時可以在component中用externalclasses定義段定義若干個外部樣式類。

這個特性可以用於實現類似於 view 元件的 hover-class 屬性:頁面可以提供乙個樣式類,賦予 view 的 hover-class ,這個樣式類本身寫在頁面中而非 view 元件的實現中。

注意:在同乙個節點上使用普通樣式類和外部樣式類時,兩個類的優先順序是未定義的,因此最好避免這種情況。

/* 元件 custom-component.js */

component()

這段文字的顏色由元件外的 class 決定

小程式學習二(模板和元件)

1 輪播圖元件 2 模板定義和使用 定義,傳值 定義模板 name 模板名字 使用模板 3 資料儲存 1 快取 wx.setstorage let oldcollectflag wx.getstoragesync iscollected 獲取資料 2 全域性儲存 isplay false,playp...

小程式元件 map

map元件用於展示地圖 longitude中心經度 latitude中心緯度 markers地圖中的位置標記點 controls在地圖上顯示控制項,控制項不隨著地圖移動 polyline指定一系列座標點,從陣列第一項連線至最後一項 bind 相關事件 page polyline color ff66...

小程式 元件操作

在小程式開發中,難免會遇到一些重複的顯示功能,避免浪費開發資源就需要把公共的部分做成共享的功能,也就是組建。在跟目錄中,建立component目錄,用於存放元件。在component下建立元件資料夾。與頁面一致包含四個檔案。在元件中編寫的內容與頁面中是一樣的方式。在其他頁面呼叫時,需要在其他頁面中的...