uniapp 微信小程序 阻止用户返回且触发方法
<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; 就可以解决滚动的问题

更多推荐

所有评论(0)