【微信小程序】template模板使用詳解
阿新 • • 發佈:2019-05-06
微信小程序 emp title ood wxs template tap 詳解 right
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>
【微信小程序】template模板使用詳解