数据绑定
就是把js里面的数据显示到.wxml上面
首先要保证.js文件的data里面有对应的键
Page({
data:{
key:‘要显示的值’
}
})
在.wxm里面显示的方法
{{ key }}
小程序中的{{ }}里面可以存放三目运算符或者基本运算符
条件渲染
wx:if = {{这里可以写表达式,但是最终结果要是bool值}}
{{}}里面结果是true就显示,如果是false就不显示
block wx:if
block wx:if与wx:if使用基本一致只是增加了一个block标签来包裹
注意:wx:if如果为false那么里面的空间就不会渲染,只有当true的时候才会渲染
列表渲染
列表渲染就是通过微信的wx: for来一次渲染多条数据
每一个创建出来的单元里面都存在item这个key 和 index这个下标
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
{{index}}: {{item.message}}
渲染后的结果
0: foo
1: bar
列表渲染可以自己来添加字段
使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名,
如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
{{idx}}: {{itemName.message}}
block wx:for
block wx:for与wx:for使用基本一致只是增加了一个block标签来包裹
{{index}}: {{item.message}}
事件
什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如 id, dataset, touches。
事件的执行写在.js里面
Page({
evetHandleName: function(参数1,参数2,...){
事件执行的代码
}
})
事件的绑定写在.xmml里面 如点击事件bindtap
View点击触发evetHandleName事件
事件的绑定与冒泡
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发handleTap2,点击 outer view 会触发handleTap1。
outer view
middle view
inner view
事件的捕获
在下面的代码中,点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
outer view
inner view
如果将上面代码中的第一个capture-bind改为capture-catch,将只触发handleTap2。
outer view
inner view
持续更新中...