位置:电子教程 > 微信小程序入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序起步
小程序基础知识
小程序基础语法
当前阅读教程:微信小程序入门教程 > 模板
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 条件渲染 下一篇: 事件

视图层WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

模板用于将一些公用的WXML代码单独整理成为一个.wxml文件,然后在有需要的地方直接引入即可。

1.定义模板

使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段,.wxml文件代码示例

小白教程网www.2d5.net

如下:

<!--

  index: int

  msg: string

  time: string

-->

<template name="msgItem">

  <view>

    <text> {{index}}: {{msg}} </text>

    <text> Time: {{time}} </text>

  </view>

</template>

2.使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,.wxml文件代码示例

小白教程网www.2d5.net

如下:

<template is="msgItem" data="{{...item}}"/>

.js文件代码示例

小白教程网www.2d5.net

如下:

Page({

  data: {

    item: {

      index: 0,

      msg: 'this is a template',

      time: '2016-09-15'

    }

  }

})

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板,.wxml文件代码示例

小白教程网www.2d5.net

如下:

<template name="odd">

  <view> odd </view>

</template>

<template name="even">

  <view> even </view>

</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">

     <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>

</block>

模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。


上一篇: 条件渲染 下一篇: 事件
毕业设计网             广告联系QQ:45157718(微信同号)