【微信小程序】template模板使用详解
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>