条件渲染 语法
Wx:if wx:elif wx:else
优秀
不错
一般
.Block
不是组件,只是一个包裹元素,可以用作列表渲染及条件渲染。
<block wx:if="{{score > 90}}">
<view >优秀</view>
<view >90以上</view>
</block>
<block wx:elif="{{score >= 75}}">
<view >不错</view>
<view >75以上</view>
</block>
<block wx:else>
<view >一般</view>
<view >75以下</view>
</block>
.If和hidden
区别
wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
如果需要频繁切换页面元素就是要hidden,反之使用if。
模板
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
注意:
模板中的数据以及组件样式有调用它的页面负责管理。
定义模板
<template name=”temp”>
业务组件.....
</template>
<!-- 定义模板 name -->
<template name="temp">
<view>用户名是:李四</view>
<view>用户年龄是:20</view>
<view>用户性别是:男</view>
</template>
<!-- 定义模板 name -->
<template name="temp">
<view>用户名是:{{name}}</view>
<view>用户年龄是:{{age}}</view>
<view>用户性别是:{{sex}}</view>
</template>
使用模板
<block wx:for="{{info}}">
<template is="temp" data="{{...item}}" />
</block>
引用
WXML 提供两种文件引用方式import和include。
Import
引入模板(template)
Import 作用域问题:
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
Include
引入除模板外的代码组件,常用于项目中有公共的头部、左侧功能栏、相同的底部。