Wex5开发APP中组件的事件和操作_优品建站

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

  每个组件都有其自己的事件及操作。将组件的常用方法和图标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","张三");。

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

  • react组件化实战训练——TodoList
    在这个简单的TodoList项目中,需要实现:● 通过input输入框输入todo内容;● 单击Submit按钮将输入的内容展示在页面上。
  • Bootstrap案例实训——设计网页轮播组件
    轮播是页面中使用频率比较高的组件之一,要使用Bootstrap设计基本组件,需要满足两个条件: 正确设计最基本的HTML结构; 需要Bootstrap中的jQuery插件提供支持。
  • Jquery EasyUI组件实战:购物车的拖放
    本文将向读者演示如何利用拖放和放置组件开发一个购物车程序。该程序允许用户将商品拖放到购物车内,并在购物车内显示商品的名称、单价以及数量,最后统计购物车内物品的总价。
  • React组件render()方法的使用举例
    render()方法用于渲染虚拟DOM,返回ReactElement类型。
  • 基于WeX5开发手机APP的全过程
    WeX5开发一个手机应用的过程包括:1.环境准备,2.应用开发,3.调试运行,本地打包(1)模拟器运行调试。
  • Vue.js的事件绑定与监听
    当模板渲染完成之后,就可以进行事件的绑定与监听了。Vue.js提供了v-on指令用来监听DOM事件,通常在模板内直接使用,而不像传统方式在js中获取DOM元素,然后绑定事件。
  • React组件的声明方式
    在React中创建组件的方式有3种: ES 5写法:React.createClass()(老版本用法,不建议使用);ES 6写法:React.Component;无状态的函数式写法,又称为纯组件SFC。
  • WeX5安装与WeX5启动
    WeX5分为Windows版本和Mac版本,用于安装在Windows系统上和Mac OS系统上。Windows版本可以生成安卓App,Mac版本可以生成安卓App和iOS App。
  • thinkPHP6.0模型和数据库的事件
    本文我们来补充一下遗漏的知识点,数据库和模型的事件。
  • JavaScript实现事件对象阻止默认行为
    本文教大家如何用JavaScriptt实现事件对象阻止默认行为。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC