循环指令key属性补充
Vue和React框架用遍历指令时的key值不建议用index
(1)key值在没有删除插入操作时只要是唯一值也无所谓,即此时为index索引也可以
(2)如果有删除或者插入的操作,后一位会继承删掉的index,这时的key写不如不写,本来key是为了让遍历性能优化的操作,这种可能重复或者改变的key值,不仅不会优化还会影响性能
(3)index作为:key值,有可能导致第一次执行循环体初始化失败,正确的做法是尽量使用理想的 key 值,比如每项都有的唯一 id或者名字
案例:用index作为wx:key值
//wxml
<block wx:for="{{switchList}}" wx:key="index">
<view>
{{item.id}}-<switch></switch>
</view>
</block>
<button bindtap="addSwitch">点击添加</button>
//js
data: {
switchList:[
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 }
]
},
// 按钮事件
addSwitch() {
const newSwitch = [{
id: this.data.switchList.length + 1
}];
this.setData({
switchList: newSwitch.concat(this.data.switchList)
})
},
案例:用id作为wx:key值
//wxml
<block wx:for="{{switchList}}" wx:key="id">
<view>
{{item.id}}-<switch></switch>
</view>
</block>
<button bindtap="addSwitch">点击添加</button>
//js
data: {
switchList:[
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 }
]
},
// 按钮事件
addSwitch() {
const newSwitch = [{
id: this.data.switchList.length + 1
}];
this.setData({
switchList: newSwitch.concat(this.data.switchList)
})
},
WXML语法—条件渲染
wx:if在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:
//wxml
<block wx:if="{{age<18}}">
<view>未成年</view>
<view>你不可以进入会场</view>
</block>
<view wx:elif="{{age == 18}}">刚成年</view>
<view wx:else>成年</view>
<block>
标签
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
hidden隐藏元素
除了wx:if可以控制元素显隐外,hidden属性也可以控制显隐
<view hidden="{{hidden}}">
<text>文本标签1</text>
<text>文本标签2</text>
</view>
注意局限性:hidden元素对块状布局才生效,对行内元素也生效,但不推荐使用
wx:if vs hidden
①wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染
②wx:if是惰性的,切换开销大,但初始化开销小
③hidden组件始终会被渲染,只是简单的控制wxss显示与隐藏
④一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好
WXML语法—模板
WXML提供模板template,可以在模板中定义代码片段,然后在不同的地方调用
例如:信息通报展示模板制作步骤
**①template.wxml定义模板并命名 **
<template name="publicTemplate">
<view class="publicArea">
<text>{showInfo}</text>
<text>{nowData}</text>
</view>
</template>
②在其他页面通过import和include引入
③使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入
WXML语法—引用
WXML 提供两种文件引用方式import和include
(1)import
import 可以文件中使用目标文件定义的 template,正如之前案例所示。
(2)include
include可以将整个代码引入,相当于是拷贝到 include 位置
WXML语法—共同属性
所有wxml 标签都支持的属性称之为共同属性
WXML语法—自定义属性
获取自定义属性值
event.currentTarget.dataset.***
event.currentTarget代表的是注册了监听点击事件的组件