小程序教学六（数据渲染和事件）

数据绑定

就是把js里面的数据显示到.wxml上面
首先要保证.js文件的data里面有对应的键

Page({
    data:{
       key：‘要显示的值’ 
    }
})

在.wxm里面显示的方法

<view> {{ key }} </view> 
<!-- 这里的key就是对应的.js里面的data，里面的key,显示出来的是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'
    }]
  }
})

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

渲染后的结果
0: foo
1: bar

列表渲染可以自己来添加字段
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名,
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

block wx:for

block wx:for与wx:for使用基本一致只是增加了一个block标签来包裹

 <block wx:for="{{array}}">
  <view> {{index}}: {{item.message}} </view>
</block>

事件

什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

事件的执行写在.js里面

Page({
    evetHandleName: function(参数1，参数2，...){
       事件执行的代码   
   }
})

事件的绑定写在.xmml里面 如点击事件bindtap

<view bindtap = "evetHandleName">
View点击触发evetHandleName事件
</view>

事件的冒泡与捕获

事件的绑定与冒泡

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

事件的捕获

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

持续更新中...