uniapp顶部返回按钮,返回上级返回两层
时间: 2023-12-02 20:42:10 浏览: 157
返回顶部按钮
要实现uniapp顶部返回按钮返回上级返回两层,可以使用uni.navigateBack()方法并传递参数delta为2。具体实现方法如下所示:
```vue
<template>
<view>
<view class="uni-title">这是子页面</view>
<view class="uni-content">
<text>这是子页面的内容</text>
</view>
<view class="uni-btn" @click="goBack">返回上级</view>
</view>
</template>
<script>
export default {
methods: {
goBack() {
uni.navigateBack({
delta: 2 // 返回上级返回两层
})
}
}
}
</script>
<style>
.uni-title {
height: 100px;
line-height: 100px;
text-align: center;
font-size: 36px;
color: #333;
}
.uni-content {
padding: 20px;
font-size: 28px;
color: #666;
}
.uni-btn {
display: block;
width: 200px;
height: 80px;
margin: 40px auto;
line-height: 80px;
text-align: center;
font-size: 28px;
color: #fff;
background-color: #007aff;
border-radius: 10px;
}
</style>
```
在子页面中,我们可以通过调用uni.navigateBack()方法并传递参数delta为2来实现返回上级返回两层的效果。需要注意的是,delta的值应该根据实际情况进行调整,以确保返回到正确的页面。
阅读全文