uniapp 离开页面时提示用户

最新推荐文章于 2024-04-26 15:15:34 发布

上帝的美好

最新推荐文章于 2024-04-26 15:15:34 发布

阅读量972

点赞数

分类专栏： uniapp 文章标签： uni-app Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_64493170/article/details/128980627

版权

uniapp 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章介绍了在微信小程序中如何使用wx.enableAlertBeforeUnload和wx.disableAlertBeforeUnload方法来监听并阻止用户在未保存表单数据时意外离开页面。在地址填写页面，当表单内容改变时启用退出提醒，确保用户不会丢失信息。保存信息后，需要取消监听以提供顺畅的用户体验。

摘要由CSDN通过智能技术生成

效果：

wx.enableAlertBeforeUnload：开启监听；

wx.disableAlertBeforeUnload：取消监听；

应用场景：在填写地址栏页面，我们需要做退出页面拦截

验证表单

    //表单失去焦点核验表单
    ValidationForm() {
      if (this.form.name || this.form.phone || this.form.address || this.form.areaId) {
        this.isFormChange = true;
      } else {
        this.isFormChange = false;
        //取消监听
        wx.disableAlertBeforeUnload();
      }
    },
  watch: {
    isFormChange(val) {
      if (val) {
        wx.enableAlertBeforeUnload({
          message: '当前信息未保存，退出将会丢失，是否退出？'
        });
      }
    }
  },