创新互联鸿蒙OS教程:鸿蒙OS事件

事件主要包括手势事件和按键事件。手势事件主要用于智能穿戴等具有触摸屏的设备,按键事件主要用于智慧屏设备。

公司主营业务:成都网站建设、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出播州免费做网站回馈大家。

手势事件

手势表示由单个或多个事件识别的语义动作(例如:点击、拖动和长按)。一个完整的手势也可能由多个事件组成,对应手势的生命周期。JS UI 框架支持的手势事件有:

触摸

  • touchstart:手指触摸动作开始。
  • touchmove:手指触摸后移动。
  • touchcancel:手指触摸动作被打断,如来电提醒、弹窗。
  • touchend:手指触摸动作结束。

点击

click:用户快速轻敲屏幕。

长按

longpress:用户在相同位置长时间保持与屏幕接触。

具体的使用示例如下:


{{onclick}}
{{touchStart}}
{{touchMove}}
{{touchEnd}}
{{touchCancel}}
{{onLongPress}}

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.text-container {
  padding-top: 10px;
  flex-direction: column;
}
.text-style {
  padding-top: 20px;
  padding-left: 100px;
  width: 750px;
  height: 100px;
  text-align: center;
  font-size: 50px;
  color: #ffffff;
  background-color: #09ba07;
}

// xxx.js
export default {
  data: {
    textData: '',
    touchStart: 'touchstart',
    touchMove: 'touchmove',
    touchEnd: 'touchend',
    touchCancel: 'touchcancel',
    onClick: 'onclick',
    onLongPress: 'onlongpress',
  },
  onInit() {
    this.textData = 'initdata';
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onDestroy: function () {},
  touchCancel: function (event) {
    this.touchCancel = 'canceled';    
  },
  touchEnd: function(event) {
    this.touchEnd = 'ended';
  },
  touchMove: function(event) {
    this.touchMove = 'moved';
  }, 
  touchStart: function(event) {
    this.touchStart = 'touched';
  },
  longPress: function() {
    this.onLongPress = 'longpressed';
  },
  click: function() {
    this.onClick = 'clicked';
  },
}

按键事件

按键事件是智慧屏上特有的手势事件,当用户操作遥控器按键时触发。用户点击一个遥控器按键,通常会触发两次 key 事件:先触发 action 为 0,再触发 action 为 1,即先触发按下事件,再触发抬起事件。action 为 2 的场景比较少见,一般为用户按下按键且不松开,此时 repeatCount 将返回次数。每个物理按键对应各自的按键值(keycode)以实现不同的功能,常用的按键值请参考组件通用事件。具体的使用示例如下:


{{up}}
{{down}}

/* xxx.css */
.card-box {
  flex-direction: column;
  justify-content: center;
}
.content-box {
  align-items: center;
  height: 200px;
  flex-direction: column;
  margin-left: 200px;
  margin-right: 200px;
}
.content-text {
  font-size: 40px;
  text-align: center;
}

// xxx.js
export default {
  data: {
    up: 'up',
    down: 'down',
  },
  focusUp: function() {
    this.up = 'up focused';
  },
  blurUp: function() {
    this.up = 'up';
  },
  keyUp: function() {
    this.up = 'up keyed';
  },
  focusDown: function() {
    this.down = 'down focused';
  },
  blurDown: function() {
    this.down = 'down';
  },
  keyDown: function() {
    this.down = 'down keyed';
  },
}

按键事件通过获焦事件向下分发,因此示例中使用了 focus 事件和 blur 事件明确当前焦点的位置。点按上下键选中 up 或 down 按键,即相应的 focused 状态,失去焦点的按键恢复正常的 up 或 down 按键文本。按确认键后该按键变为 keyed 状态。

分享题目:创新互联鸿蒙OS教程:鸿蒙OS事件
文章位置:http://www.shufengxianlan.com/qtweb/news38/544788.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联