阅读(4678)
赞(8)
百度智能小程序 模板
2020-08-10 16:55:59 更新
SWAN 提供模板 template 的用法,旨在提高工程化和代码可维护性,可以在模板中定义代码片段,并被外界注入值,然后在合适的时机调用。
定义模板
name 属性,定义了模板的名字。<template>内定义代码片段,如:
代码示例
<!-- template-demo.swan-->
<template name="person-card">
<view>
<text>位置: {{pos}}</text>
<text>姓名: {{name}}</text>
</view>
</template>
注意:
- 模板之间不可嵌套。
使用模板
通过 is 属性,声明需要使用的模板,data 是所需要传入到模板的值,注意对象字面量的使用方法,对象字面量是三个大括号包裹。
代码示例
<!-- template-demo.swan-->
<template is="person-card" data="{{{...person}}}" />
// template-demo.js
Page({
data: {
person: {
name: 'Lebron James',
pos: 'SF', age: 33
}
}
});
is 可以动态决定具体需要渲染哪个模板。
代码示例
在开发者工具中打开<!-- template-demo.swan-->
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block s-for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>