微信小程式模板之template

2021-10-07 17:58:14 字數 1276 閱讀 7687

template 模版 主要用於展示,模版中不涉及事件處理, 需要處理的事件邏輯放在呼叫模版的頁面中。 乙個 template 模版 只包含 wxml wxss 檔案,建議檔案命名以template結尾

以渲染資料為多個陣列為例:

"postitem"

>

="post-container"

>

"}"class

="post-author"

>

<

/image>

="post-data"

>

}<

/text>

<

/view>

<

/template>

template 模版的引用需要使用標籤。 該標籤的 src 屬性

為需要引用模版的路徑。

template 模版的使用用標籤。 使用 is 屬性來區別模版檔案中定義的模版。

使用data傳入模版中的資料。

注意:引入標籤需要閉合否則無法渲染;

a 引入頁面wxml

for=

"}" wx:

for-item=

"item" wx:key=

"author"

>

"postitem" data=

"}"/

>

<

/block>

注意:此處傳入的data為vx-for-item函式中的item

…為es6中物件的剩餘操作

b 引入頁面wxss

@import "url";

注意:此處傳入的url應為相對路徑

新增乙個額外標籤**事件

for=

"}" wx:

for-item=

"item" wx:key=

"author"

>

"onposttap"

>

"postitem" data=

"}"/

>

<

/view>

<

/block>

微信小程式之模板使用

一 模板 二 引用 wxml 提供兩種檔案引用方式import和include。import可以在該檔案中使用目標檔案定義的template import 有作用域的概念,即只會 import 目標檔案中定義的 template,而不會 import 目標檔案 import 的 template。i...

微信小程式(模板)

1.模板 wxml提供模板 template 可以在模板中定義 片段,然後在不同的地方呼叫。定義模板 使用name屬性,作為模板的名字。然後在內定義 片段,如 name postitem class post container class post author date class post a...

微信小程式 模板

wxml提供模板 template 可以在模板中定義 片段,然後在不同的地方呼叫。使用 name 屬性,作為模板的名字。然後在內定義 片段,如 time 使用 is 屬性,宣告需要的使用的模板,然後將模板所需要的 data 傳入,如 page is 屬性可以使用 mustache 語法,來動態決定具...