Weex第一天:事件之常见事件

点击事件

onclick属性触发元素上的单击手势。

注：该input和switch组件目前不支持的click情况下，请用change或input事件来代替。

事件对象

• type ： click
• target ：触发事件的目标组件
• timestamp ：事件触发时的时间戳

Longpress事件

如果一个longpress事件绑定到一个组件上，当用户长时间按下事件时，该事件将被触发。 注：该input和switch组件目前不支持的click情况下，请用change或input事件来代替。

事件对象

• type ： longpress
• target ：触发事件的目标组件
• timestamp ：事件触发时的时间戳

出现事件

如果一个出现的事件绑定到一个可滚动容器内的组件，当组件变为可见时，该事件将被触发。

事件对象

• type ： appear
• target ：触发事件的目标组件
• timestamp ：事件触发时的时间戳
• direction：滚动滚动的方向。可能是up或down。

消失的事件

如果一个disappear事件绑定到一个可滚动容器内的组件，当组件从视口中滚出并从视线中消失时，该事件将被触发。

事件对象

• type ： disappear
• target ：触发事件的目标组件
• timestamp ：事件触发时的时间戳
• direction：滚动滚动的方向。可能是up或down

页面事件

Weex为您提供简单的页面状态管理，例如viewappear和viewdisappear。 该viewappear事件将在页面即将显示或任何动画配置显示之前触发。例如，push在navigator模块中调用方法时，该事件将在新页面中触发。当页面即将被解雇时 ，viewdisappear事件将被触发。

从不同appear和disappear组件，这两个事件集中在整个页面的状态，所以他们必须绑定到根组件。

另外，这些事件也可以被绑定到实际上不是root的body组件wxc-navpage。

事件对象

• type：viewappear或viewdisappear
• target ：触发​​事件的目标组件
• timestamp ：事件触发时的时间戳

例

<template>
  <div>
    <div class="box" @click="onclick" @longpress="onlongpress" @appear="onappear"  @disappear="ondisappear"></div>
  </div>
</template>

<script>
  const modal = weex.requireModule('modal')
  export default {
    methods: {
      onclick (event) {
        console.log('onclick:', event)
        modal.toast({
          message: 'onclick',
          duration: 0.8
        })
      },
      onlongpress (event) {
        console.log('onlongpress:', event)
        modal.toast({
          message: 'onlongpress',
          duration: 0.8
        })
      },
      onappear (event) {
        console.log('onappear:', event)
        modal.toast({
          message: 'onappear',
          duration: 0.8
        })
      },
      ondisappear (event) {
        console.log('ondisappear:', event)
        modal.toast({
          message: 'ondisappear',
          duration: 0.8
        })
      }
    }
  }
</script>

<style scoped>
  .box {
    border-width: 2px;
    border-style: solid;
    border-color: #BBB;
    width: 250px;
    height: 250px;
    margin-top: 250px;
    margin-left: 250px;
    background-color: #EEE;
  }
</style>