template标签,主要用于公用组件内容,方便调用,提高了代码的复用性
一层template
1. 先新建template文件和page
2. 在新建的template中的wxml定义
<template name="favourite">
<view class='vertical' style='flex:auto;align-items: center;'>
<text class='number'>{{no}}</text>
<text class='numbertip'>{{noTip}}</text>
</view>
</template>
3. 在需要调用template的wxml中使用
<import src="../../template/template.wxml" />
<template is="favourite" data="{{...favourite}}" />
4. 在js文件中去设置该数据源的值
data{
favourite: {
no: "0",
noTip: "我的收藏"
}
}
多层template赋值
1. 先新建template文件和page
2. 在新建的template中的wxml定义
<template name="mine">
<view class='vertical'>
<image src='{{imagePath}}' style='width:100rpx;height:100rpx'></image>
<text class='number'>{{mine}}</text>
</view>
</template>
<template name="minerow">
<view class='horizontal' style='background-color:white; margin-top:30rpx;'>
<template is="mine" data="{{imagePath,mine}}"></template>
<view class='verticalline'></view>
<template is="mine" data="{{imagePath:imagePath1,mine:mine1}}"></template>
<view class='verticalline'></view>
<template is="mine" data="{{imagePath:imagePath2,mine:mine2}}"></template>
<view class='verticalline'></view>
<template is="mine" data="{{imagePath:imagePath3,mine:mine3}}"></template>
</view>
</template>
3. wxml中使用
<template is="minerow" data="{{...minerow11}}"></template>
4. 在js文件中去设置该数据源的值
data{
minerow11: {
imagePath: "../../../resource/mine.png",
mine: "我的账户",
imagePath1: "../../../resource/mine.png",
mine1: "我的优惠券",
imagePath2: "../../../resource/mine.png",
mine2: "收货地址",
imagePath3: "../../../resource/mine.png",
mine3: "在线客服"
}
}
对比2和4中可以发现,其实关键在于可以通过
data="{{imagePath: imagePath2,mine:mine2}}"
这种方式给不同的template进行赋值。