<view v-if="isShowPageContainer">
          <page-container 
            :show="true" 
            :overlay="false" 
            @beforeleave="handleBeforeLeave"
          ></page-container>
        </view>

            handleBeforeLeave() {

                this.isShowPageContainer = false; // 先关闭容器触发拦截
                  uni.showModal({
                    title: '提示',
                    content: '确认放弃编辑并返回吗?',
                    success: (res) => {
                      if (res.confirm) {
                        uni.navigateBack({ delta: 1 }); // 用户确认后执行返回
                      } else {
                        this.isShowPageContainer = true; // 取消则恢复拦截
                      }
                    }
                  });
                },

按照以上方法写 效果就是用户 返回的时候 弹出 放弃编辑提示  确认或取消后 就执行即可

注意:在使用微信小程序page-container组件时候,通过将show绑定的值变为false 来使组件隐藏。

但隐藏后会出现页面无法滚动的问题。

此时页面 page 会多一个固定定位。 覆盖这个样式,在page的样式里加  position: relative !important;  top: 0px !important; 就可以解决滚动的问题 

更多推荐