微信小程序返回拦截

33 阅读1分钟

需求

uniapp开发的微信小程序在一些编辑页面,用户点击返回时,需要提醒用户是否确认返回,防止误触导致编写数据丢失,如下图:

image.png

实现

 <page-container
      :show="show"
      :duration="false"
      :overlay="false"
      @beforeleave="beforeleave"
      @afterleave="afterleave"
    >
    </page-container>
    
    
  const show = ref(true);
  function beforeleave() {
    console.log("点击返回了");
    if (show.value) {
          //弹框提示 请自定义
          modal.value.open({
            title: "提示",
            content: "本次操作还未保存,是否确定返回",
            confirm() {
              console.log("confirm");
              isBackConfirm = false;
              uni.navigateBack({});
            },
            cancel() {
              show.value = false;
              setTimeout(() => {
                show.value = true;
              }, 100);
            },
          });
         return true;
      }
      uni.navigateBack({
        delta: 1,
      });
    }
  }
  
 function afterleave() {
     return;
  }

问题

用户强制两次返回过快不能拦截,正常使用还是挺不错的