uniapp自定义导航栏返回按钮
时间: 2023-09-08 18:10:34 浏览: 303
在Uniapp中,可以通过配置自定义导航栏来实现自定义返回按钮。首先,在pages.json文件中将导航栏样式设置为自定义,如下所示:
```
{
"path": "pages/shop/shop",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
```
然后,在页面中处理返回按钮的逻辑。可以在onBackPress函数中判断返回按钮的来源,如果来源是backbutton,则执行相应的业务逻辑:
```
onBackPress(e) {
if (e.from === "backbutton") {
if (uni.getStorageSync('isLowAccount')) {
uni.redirectTo({ url: '../wallet/wallet' });
return true; // 返回true表示不执行默认的返回行为
}
}
}
```
需要注意的是,目前只能在页面中处理自定义导航栏的返回按钮,而不是在自定义组件中直接配置该函数。只有当返回值为true时,才表示不执行默认的返回行为,否则均会执行默认的返回行为。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [uni-app监听处理H5/App默认返回事件](https://blog.csdn.net/w_minx/article/details/109134323)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [【uniapp】小程序自定义一个通用的返回按钮组件](https://blog.csdn.net/ONLYSRY/article/details/126178045)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文