标签
- wxml 对大小写敏感
<icon class="" type="success" size="23" color=""></icon>
<Icon class="" type="success" size="23" color=""></Icon>
- wxml 具有数据绑定,可以将数据变化反应到页面上
<button bind:tap="getAppFunc">
click
</button>
Page({
...
getAppFunc() {
wx.showToast({
title: '点击事件触发',
});
}
})
- wxml 的属性值必须包含在双大括号中
<view >
{{msg}}
</view>
Page({
data: {
msg: '信息'
}
})
条件判断
- wx:if, wx:elif, wx:else条件逻辑
<view wx:if="{{show}}">
展示
</view>
<view wx:else>
不展示
</view>
Page({
data: {
show: true
}
})
- 要一次性判断多个标签是否需要展示,使用
<block/>
标签包裹
<block wx:if="{{show}}">
<view>block 元素</view>
<view>block 元素</view>
<view>block 元素</view>
<view>block 元素</view>
</block>
<block wx:else>
<view>block 元素</view>
<view>block 元素</view>
<view>block 元素</view>
<view>block 元素</view>
</block>
列表渲染
- wx:for列表渲染,默认当前项下标 index,当前项的值为 item
<view wx:for="{{arr}}" wx:key="item">
{{item}}
</view>
- wx:for-index重新制定下标名
<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="value" wx:key="value">
第{{idx}}个: {{value}}
</view>
- wx:for-item重新指定变量名
9.wx-for 渲染多节点的结构块也可以使用<block />
<block wx:for="{{arr}}" wx:for-index="idx" wx:for-item="value" wx:key="value">
<view >
索引: {{idx}}
</view>
<view >
值: {{value}}
</view>
</block>
- wx:key 是唯一标识,新增删除元素时一定要有
模板
- 模板用 template name="“声明,template is=”"调用,然后传递data 属性去渲染动态的字段
<template name="tpl">
<div>
{{msg}}
</div>
</template>
<template is="tpl" data="{{msg}}" />
这里单标签的形式调用就可以
引用
wxml 提供了 import,include 两种引用方式
import
引入目标文件中的template,只可以引入一层
- template.wxml里的模板
<template name="tpl1">
<div>
tpl1
</div>
</template>
<template name="tpl2">
<div>
tpl2
</div>
</template>
index.wxml里引用
<import src="./template.wxml" />
<template is="tpl1" data="{{msg}}" />
inlcude
include 引入目标文件中除 template 和wxs 之外的全部代码,相当于把代码嵌入到了当前位置
template 的代码
<template name="tpl1">
<div>
tpl1
</div>
</template>
<template name="tpl2">
<div>
tpl2
</div>
</template>
<view>
这些是除下 template 之外的代码
</view>
index.wxml 的代码
<include src="./template.wxml" />
wxml 共同属性
- hidden是否显示
- data-*:自定义属性,组件上事件触发的时候,会传递给处理函数
<button bind:tap="clickButton" data-value="点击" data-tag="button">
点击
</button>
Page({
...
clickButton(e) {
const {tag, value} = e.target.dataset
wx.showToast({
title: `tag: ${tag}, value: ${value}`,
});
})
- bind/catch 组件上的事件