当前位置：公众IT > 技术文章 > 小程序自定义导航栏返回键怎么添加一个返回提示框？点击取消停留在页面

小程序自定义导航栏返回键怎么添加一个返回提示框？点击取消停留在页面

新闻来源：互联网资料整理发布时间：2023/4/5 16:24:31 共计：4637 浏览

前言：

5小时前小编发现微信小程序用户：【9】提出了一个关于“小程序自定义导航栏返回键怎么添加一个返回提示框？点击取消停留在页面”的问题,在问题中开发者9对该问题做了如下阐述：

问题类型：

API和组件:

问题描述：

<!– 导航栏 –>
<ChildNav style=“width: 100%;”>
<template v-slot:barContent>人像抠图</template>
</ChildNav>

<template>
<view class=“navBarBox”>

<!– 占位 –>
<view :style=“{ height: statusBarHeight + ‘px’ }”></view>
<view style=“height: 82upx;padding: 3upx 50upx;padding-bottom: 8upx;”></view>

<!– 状态栏 –>
<view class=“fixStyle”>
<view :style=“{ height: statusBarHeight + ‘px’ }”></view>
<!– 真正的导航栏内容 –>
<view class=“navBar”>
<image @tap=“toback” src=“../static/icon/back.png” mode=“widthFix”></image>
<slot name=“barContent”></slot>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
// 状态栏高度
statusBarHeight: 0,
}
},
created() {
this.statusBarHeight = uni.getSystemInfoSync()[‘statusBarHeight’];
},
methods: {
toback() {
uni.navigateBack();
}
}
}
</script>

上面是自定义导航栏组件的代码

想要实现这样的

该图片引用微信开放社区

注：以上是微信小程序开发者：”9″对于本问题的一些阐述，这里做一个引用，我们将实时关注微信小程序助手对该问题提出的解决方案。

解决方案：

【4小时前】微信小程序技术运营专员对用户9提出的小程序自定义导航栏返回键怎么添加一个返回提示框？点击取消停留在页面给予如下回复

toBack(){
  wx.showModal({
    title: '提示',
    content: '确认放弃?',
    success (res) {
      if (res.confirm) {
        wx.navigateBack()
      } else {
        console.log('用户点击取消')
      }
    }
  })
?}