美文网首页
小程序template使用

小程序template使用

作者: 爱笑的疯小妞 | 来源:发表于2018-03-30 10:37 被阅读0次

定义模板
使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段
使用模板
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入
请仔细体会 test,user,item,index数据使用

data: {
 user:[{name:"test1",age:12},{name:"test2",age:13}],
 test:"hello!world"
}

如果不采用模板进行列表渲染

<view wx:for="{{user}}">
  序号:{{index}},姓名:{{item.name}}年龄:{{item.age}}{{test}}
</view>

采用模板进行列表渲染

//形式一
//定义模板
<template name="myTpl">
  <view>
    <text>序号:{{index}},姓名:{{item.name}}年龄:{{item.age}}{{test}}
   </text>
  </view>
</template>

//使用模板
<view wx:for="{{user}}">
  <template is="myTpl" data="{{item:item,index:index,test:test}}"/>//注意写法
</view>
//形式二
//定义模板
<template name="myTpl">
  <view>
    <text>{{index}} {{name}}: {{age}}{{test}} </text>//注意写法
  </view>
</template>

//使用模板
<view wx:for="{{user}}">
  <template is="myTpl" data="{{...item,index:index,test:test}}"/>
</view>

相关文章