IT俱乐部 JavaScript 微信小程序点击左上角返回弹窗提示解决思路

微信小程序点击左上角返回弹窗提示解决思路

微信小程序点击左上角返回弹窗提示解决思路

业务需求:当页面表单没有提交直接返回时,要提示用户是否保存当前信息,如果已经提交就不提示了。

由于微信小程序是无法监听右上角按钮返回事件。

所以就换个思路

小程序提供了如下两个Api

wx.enableAlertBeforeUnload(Object object):开启小程序页面返回询问对话框

wx.disableAlertBeforeUnload:关闭小程序页面返回询问对话框

 实现方法如下:

onLoad: function (options) {
    this.enableFun()
},
enableFun() {
    wx.enableAlertBeforeUnload({
      message: '离开当前页面数据将会被清空',
      success(res) {
        console.log('success:', res)
      },
      fail(res) {
        console.log('fail:', res)
      },
      complete(res) {
        console.log('complete:', res)
      }
    })
  }

如果在某种情况下(如已经提交了数据),不需要弹出提示框

onSubmit(){
    this.disableFun()
},
// 关闭小程序页面返回询问对话框
disableFun() {
    wx.disableAlertBeforeUnload({
      success(res) {
        console.log('success:', res)
      },
      fail(res) {
        console.log('fail:', res)
      },
      complete(res) {
        console.log('complete:', res)
      }
    })
  }

微信小程序阻止用户返回上一页,并弹窗给用户确定是否要返回上一页

在onload中调用微信的enableAlertBeforeUnload方法,在首次进入会自动监听当前的页面,在返回的时候会自动弹出弹窗阻止用户返回上一页,点击确定则返回上一页,取消则停留在当前页

onLoad: function(){
    wx.enableAlertBeforeUnload({
      message: "返回上页时弹出对话框1212",
      success: function (res) {
        console.log("方法注册成功:", res);
      },
      fail: function (errMsg) {
        console.log("方法注册失败:", errMsg);
      },
    });
}

到此这篇关于微信小程序 点击左上角返回弹窗提示的文章就介绍到这了,更多相关小程序点击返回弹窗提示内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/12299.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部