Wex5开发APP中组件的事件和操作

作者：优品建站      发布日期：2022-05-25      访问量：36

  每个组件都有其自己的事件及操作。将组件的常用方法和图标icon、标题label组合为操作，在组件的单击事件中关联操作，就减少了写js代码调用组件方法的工作量，同时操作中的icon和label也会应用到组件上。例如，在按钮的单击事件onClick中选择data组件的保存操作，按钮将会使用保存操作设置的icon和label，省去了选择icon和设置label的步骤，从而保证了系统的风格统一，如图4-28所示。

图4-28 组件的操作
一． on开头的事件（回调型事件）
1.添加组件事件
  添加data组件的onDataChange事件，选中data组件，将属性编辑器切换到事件编辑器，找到onDataChange事件，在右侧事件值的空白区域双击。此时，在w文件中的data组件上增加了一个事件属性：onDataChange="mainDataChange"；在js文件中相应增加了这个方法mainDataChange，同时跳转到JS开发界面。
2.使用事件方法中的event参数
  组件事件提供了event参数，它是一个json对象，其中包含在这个事件中需要用到的参数信息。
在事件方法中使用event参数：
  event参数里面的三个常用的参数如下。
  ●event.source：组件的JS对象。
  ●event.bindingContext：组件绑定的上下文，包含$model、$object等。
  ●event.cancel：可修改，设置为true后中断当前动作。
  on开头的事件是组件特意提供的事件，在触发和执行效率方面优于标准的dom事件。在操作组件和调用组件的方法时，会触发相关事件。还特别提供了在onClick事件中绑定组件的操作，从而减少代码量。
  比如data数据组件的onDataChange事件，如图4-29所示，是在发现该数据组件绑定的数据变化时调用的事件，通常在这里写刷新数据组件的JS代码：
  图4-29 data数据组件的onDataChange事件
二． bind开头的事件（标准的dom事件）
  在WeX5中有很多组件都有bind类的事件，如list组件的bind-click事件。
  ●标准事件，可向上冒泡。
  ●使用event.currentTarget获取组件的jQuery对象。
  在list组件的单击事件中获取当前行的方法如下。
  1）list组件的单击事件中获取当前行对象的方法是：event.bindingContext.$object。
  2）获取这行数据的某个列的值可以是event.bindingContext.
$object.val("fName");。

  3）修改当前行某个列的值，可以是event.bindingContext.$object.val("fName","张三");。

  免费获取网站制作报价服务，可以联系优品建站．