当前位置: 首页 > 文档资料 > MUI 中文文档 >

手势事件

优质
小牛编辑
117浏览
2023-12-01

在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:

分类参数描述
点击tap单击屏幕
doubletap双击屏幕
长按longtap长按屏幕
hold按住屏幕
release离开屏幕
滑动swipeleft向左滑动
swiperight向右滑动
swipeup向上滑动
swipedown向下滑动
拖动dragstart开始拖动
drag拖动中
dragend拖动结束
#gestureList{ margin-bottom: 15px; } #gestureList td{ padding-left: 8px; } #gestureList tr>td:first-child{ width: 70px; } #gestureList tr>td:last-child{ width: 100px; } #gestureList tr>td:nth-child(2){ width: 100px; }

手势事件配置

根据使用频率,mui默认会监听部分手势事件,如点击、滑动事件;为了开发出更高性能的moble App,mui支持用户根据实际业务需求,通过mui.init方法中的gestureConfig参数,配置具体需要监听的手势事件,。

mui.init({
  gestureConfig:{
   tap: true, //默认为true
   doubletap: true, //默认为false
   longtap: true, //默认为false
   swipe: true, //默认为true
   drag: true, //默认为true
   hold:false,//默认为false,不监听
   release:false//默认为false,不监听
  }
});

注意:dragstart、drag、dragend共用drag开关,swipeleft、swiperight、swipeup、swipedown共用swipe开关

事件监听

单个元素上的事件监听,直接使用addEventListener()即可,如下:

elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑动");
});

若多个元素执行相同逻辑,则建议使用事件绑定(on())

扩展阅读

代码块激活字符 minitgesture