Vue3+Vant3——监听物理返回退出功能
vue3+vant做h5转App时，会遇到用手机上的返回键会直接回退到手机桌面，只能用过按钮来实现back回退，网上也有很多实现方法，但mui对vue3来说可能不太支持，所以这里使用原生js的方法实现。完成后通过npm run build打包在手机上进行查看。在index.html中引入vant链接。事件来对物理返回键进行配置。接着写js部分，通过。
·
按钮回退
vue3+vant做h5转App时，会遇到用手机上的返回键会直接回退到手机桌面，只能用过按钮来实现back回退，网上也有很多实现方法，但mui对vue3来说可能不太支持，所以这里使用原生js的方法实现。
这里可以这样定义
在index.html中引入vant链接。
接着写js部分，通过 plusready 事件来对物理返回键进行配置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NanChen_web</title>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
</body>
<style>
</style>
<script>
var time = '' // 用来存上一次按键时间；
setTimeout(() => {
// 监听返回按钮
document.addEventListener('plusready', function () {
plus.key.addEventListener('backbutton', function (evt) {
var webview = plus.webview.currentWebview();
var url = location.hash.split('/')[1];
if (url === 'index') { // 处于首页时,实现退出app操作
// vant.Toast('提示');
if (new Date() - time < 2000) { // 小于2s,退出程序
webview.close();
} else { // 重置时间，
time = new Date();
vant.Toast('再次点击退出', 2000);
}
return;
} else {
vant.Toast('不满足条件');
history.go(-1); // 不满足退出操作，，返回上一页
}
}, false);
})
}, 10)
</script>
</html>完成后通过npm run build打包在手机上进行查看
下面是效果展示：
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献20条内容
所有评论(0)