WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
模板的作用域:
模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs />
模块。
定义模板
<template name=\'allgood-item\'> <image src=\'{{icon}}\' class=\'all_item_image\'/> <view class=\'all_item_right\'> <text class=\'all_item_title\'>{{title}}</text> <view class=\'all_item_details\'> <view> <text class=\'all_item_new\'>{{newPrice}}</text> <text class=\'all_item_old\'>{{oldPrice}}</text> </view> <text class=\'all_item_buy\'>立即购买</text> </view> </view> </template>
使用模板
<import src=\'./allgood-item-template/allgood-item-template.wxml\'/> <block wx:for=\'{{modelArray}}\'> <template is=\'allgood-item\' data=\'{{...item}}\' /> </block>
微信小程序结合使用ES6+的解构和属性延展,我们给template传递一批属性更为方便了。
定义模板样式
.all_item_image { ... } ... .all_item_new,.all_item_old,.all_item_buy{ ... }
引用模板样式
@import \'./allgood-item-template/allgood-item-template.wxss\';
template进行绑定事件
<block wx:for=\'{{modelArray}}\'> <view class=\'all_item_view\' bindtap=\'toDetails\'> <template is=\'allgood-item\' data=\'{{...item}}\' /> </view> </block>