1.模板:
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
定义模板:
使用name属性,作为模板的名字。然后在内定义代码片段,如:
<template name="postItem">
<view class="post-container">
<view class="post-author-date">
<image class="post-author" src="{{item.avatar}}">
</image>
<text class="post-date">{{item.date}}</text>
</view>
</view>
</template>
使用模板:
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:
<import src="post-item/post-item-template.wxml"/>
// 注意:在使用模板的时候应该首先用import来引入模板,然后再使用
<block wx:for="{{posts_key}}">
<template is="postItem" data="{{item}}" />
//模板的作用域:
//模板拥有自己的作用域,只能使用data传入的数据。
</block>
同样在建立一个post-item-template.wxml模板的时候,同时也应该建立一个post-item-template.wxss文件来编写模板的样式,也应该在需要使用模板的文件夹下的wxss文件中使用@import “post-item/post-item-template.wxss”;来引入模板wxss样式文件。
2.在对加载进来的模板进行事件绑定的时候需要注意的是:
先看几段代码:
错误的事件绑定做法:
<block wx:for="{{posts_key}}" wx:key="{{index}}">
<!--使用模板-->
<template is="postItem" data="{{...item}}" catchtap="onPostTap" />
</block>
注意:因为此时的template模板并不存在于页面中,只是相当于一个占位符,在页面加载完成后就消失了,此处对template模板进行事件绑定并不会有任何的效果。
如图所示:
正确的事件绑定做法:
<block wx:for="{{posts_key}}" wx:key="{{index}}">
<!--使用模板-->
<view catchtap="onPostTap">
<template is="postItem" data="{{...item}}" />
</view>
</block>
注意:这里我们可以在模板外面使用一个view标签来进行包裹,然后再view标签上进行事件绑定。就会达到我们所预期的效果。