微信小程式 模板(template)

2021-08-14 02:54:18 字數 1498 閱讀 3990

以mui的例項首頁和列表頁面為例項

通過上圖,可以看出兩個頁面的列表部分很相近,以每行作為單元製作模板。

1、模板存放的位置以及使用模板頁面存放的位置

template模板的wxml

}

}

注意:上邊在同乙個wxml檔案內建立了兩個模板,乙個右側有箭頭,乙個右側無箭頭,以name名識別。

template模板的wxss
.tui-menu-list
在index頁面使用template模板

wxml

用import 將模板引入;

使用模板,template 的is 屬性和模板中:name 屬性對應,表示你要使用的具體模板,data 屬性是模板中要使用的資料,注意資料結構要相同;

可以直接迴圈模板,需要也可以在模板外加一層進行迴圈。

wxss

此處將wxss引入到全域性!

@import "./template/list.wxss";
直接使用import 引入列表的wxss;

建議:如果專案需要大量使用乙個模板,wxss引入到全域性,減少**量;如果專案只是很少地方使用模板,可以在需要的頁面引入wxss。

在list頁面使用template模板

wxml

右側無箭頭

右側有箭頭

圓角列表

在乙個專案中需要在多處頁面使用類似的模組,就需要建立模板----減少**量,同時**高度復用;

在同乙個wxml檔案中建立多個類似的模板用name屬性來區別;

模板wxss在全域性引入和在使用頁面引入的區別在於模板的使用量;

使用 import 引入模板 wxml 和 wxss ;

通過template 標籤使用模板,template 標籤的 is 屬性與模板的 name 屬性對應,data 屬性代表傳入模板的資料。

我的部落格,歡迎交流!

我的csdn部落格,歡迎交流!

前端筆記專欄

前端筆記列表

遊戲列表

template模板微信小程式

contentitem mini button view template contentitem data contentitem mini button view template home.wxml中引入 import src wxml btntext.wxml contentitem dat...

微信小程式模板template總結

以下是對template的幾點總結 一 二 在自定義 wxml檔案時 是你自定義的wxml檔名 需要用開頭,把你的 定義和 之間。三 官網例子顯示自定義資料可以通過data傳入我們自定義的 wxml 即我們的template裡 如果同學們傳入的是物件並且希望傳入的物件可以展開傳入,可以用三個點 再加...

微信小程式template模板使用

如下,template檔案中存放的是模板,在mine.wxml中插入模板 1.在 template authsetting index.wxml 中我們可以定義模板了,這裡我們可以寫 n 很多很多 個模板,用 name 區分,使用的時候他會自動找到對應 name 的模板。測試模板資料 2.在temp...