码迷,mamicode.com
首页 > 移动开发 > 详细

vue+cordova实现退出app效果

时间:2020-04-06 11:22:05      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:exit   实现   style   val   钩子   listen   绑定   设备   监听返回键   

//vue钩子函数created方法中添加监听等待设备API库加载好
created(){
  var that = this;
  document.addEventListener("deviceready", that.onDeviceReady, false);
}
methods:{
    //设备API可以使用了,然后在vue的methods中添加如下方法
  onDeviceReady() {
    var that = this;
       document.addEventListener("backbutton", that.eventBackButton, false);
  },
  //监听返回键按钮事件
  eventBackButton(){
    var that = this;
       that.$toast(‘再按一次退出‘);//这里使用的是vantUI框架的弹窗提示,此处可根据自身项目进行更改
       document.removeEventListener("backbutton", that.eventBackButton, false); //注销返回键
       document.addEventListener("backbutton", that.exitApp, false);//绑定退出事件
       var intervalID = setInterval(() => {
         document.clearInterval(intervalID);
         document.removeEventListener("backbutton", that.exitApp, false);
         document.addEventListener("backbutton", that.eventBackButton, false);
       },2000);
  },
  // 关闭app
  exitApp() {
      var that = this;
      navigator.app.exitApp();
  }
}
//页面离开时销毁监听事件
destroyed() {
  var that = this;
  document.removeEventListener("backbutton", that.exitApp, false);
  document.removeEventListener("backbutton", that.eventBackButton, false);
},

 

vue+cordova实现退出app效果

标签:exit   实现   style   val   钩子   listen   绑定   设备   监听返回键   

原文地址:https://www.cnblogs.com/pycmsj/p/12641168.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!