uni-app 自定义返回逻辑

最新推荐文章于 2024-05-25 15:08:25 发布
最新推荐文章于 2024-05-25 15:08:25 发布
阅读量760 收藏
点赞数
分类专栏： uni-app vue.js 文章标签： vue uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31646657/article/details/115586235
版权

引子

有需求需要从一个页面A进入页面B，但是页面B“返回上一页”时需要直接返回首页。

onBackPress监听页面返回

当用户进行以下操作时，会触发该函数：

  • Android 实体返回键 (from = backbutton)
  • 顶部导航栏左边的返回按钮 (from = backbutton)
  • 返回 API，即 uni.navigateBack() (from = navigateBack)

参考

  1. uni-app自定义返回逻辑教程 - DCloud问答
  2. 生命周期 - uni-app官网
GDBBader
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app导航栏自定义“返回按钮”多种方法设置原生返回
飙歌的博客
01-24 6028
方法一、 导航栏返回按钮事件。
uni-app-小程序自定义底部菜单样式示例
08-12
【uni-app小程序自定义底部菜单样式示例】 在uni-app框架中，开发微信小程序、支付宝小程序、H5等多端应用时，我们经常会遇到需要自定义底部导航菜单的需求，以实现更加个性化和一致性的用户体验。本示例将详细介绍...
uniapp小程序自定义返回按钮逻辑
m0_50663823的博客
09-01 998
uniapp小程序自定义返回按钮逻辑
Uniapp自定义默认返回按钮回退页面
最新发布
weixin_44389618的博客
05-25 608
【代码】Uniapp自定义默认返回按钮回退页面。
uniapp自定义返回事件（封装）
farme_guan的博客
04-28 1436
在我们使用uniapp时，我们导航栏一般都是自定义的，比如用uview框架的导航栏，那么返回事件通常会遇到以下几个问题 - [ ] 返回事件前需要做一些额外的处理 - [ ] h5项目刷新页面后返回失效 - [ ] 返回按钮点击后到指定页面
uniapp 重写自带的返回事件
weixin_55648290的博客
08-23 989
uniapp 重写自带的返回事件
uni-app ios11 返回时退出应用
baidu_36128485的博客
04-14 654
onBackPress(e) { //e.from === 'backbutton' 说明如果点击的是物理返回键或导航栏的返回键就进行以下操作 if (e.from === 'backbutton') { // 退出当前应用，改方法只在App中生效 switch (uni.getSystemInfoSync().platform) { case 'android': plus.runtime.quit(); break;
uni-app调用Android原生可以实现通信及打开WiFi
01-13
例如，uni-app可以通过`uni.sendBroadcast`方法发送一个自定义的广播，Android端的BroadcastReceiver接收到后执行相应操作，如读取系统状态、控制硬件等。\n\n3. **打开WiFi功能**\n 在Android端，需要使用`...
uni-app基础.pptx
09-01
uni-app 是一个基于 Vue.js 的跨平台开发框架，它允许开发者使用一套代码库构建应用程序，这些应用程序可以部署在iOS、Android、H5以及各种小程序平台上，如微信、支付宝、百度、头条、QQ和钉钉。这极大地提高了开发...
uni-app 请求拦截器
11-11
【uni-app请求拦截器】是基于uni-app框架实现的一种机制，它允许开发者在发送网络请求前和接收到响应后执行自定义的操作。这种机制对于统一处理请求头、数据格式、错误处理以及添加全局的请求前后的逻辑非常有用，极...
基于uni-app框架的登录模板
02-21
2. uni-app的架构：基于Vue的声明式编程，支持自定义组件，具备Vue的特性如计算属性、侦听器、指令等；同时，针对原生APP提供了原生插件接口，增强性能和用户体验。 二、登录模板详解 1. 页面结构：登录模板通常...
uniapp导航栏返回按钮样式修改
weixin_43139830的博客
02-26 1115
uniapp导航栏返回按钮样式修改。
uni-app项目 使用navigateBack返回上一页并传参 修改前一页面数据
Quentin0823的博客
04-17 1087
注：虽然都是通过getCurrentPages，但H5和APP/小程序通过getCurrentPages打印出来的前一页面的结构是不同的。参考：https://blog.csdn.net/weixin_44433499/article/details/109222663。B页面返回修改A页面title的值。
uniapp页面返回到上一个页面，更新其数据
aybaiwan的博客
06-06 1393
在上一个页面(也就是需要更新的页面)下设置一个函数用来更新，这里的forceUpdate表示接收到数据msg并赋值后，强制更新页面内容。比如我这里假设需要更新上一个页面addform对象下的car属性进行更新。在当前页面(选择数据页面)调用上一个页面的uodate函数就可以了。直接在当前页面(获取数据页面)给上一页面需要更改的数据进行赋值。
uniapp使用uni.navigateBack返回页面并修改上一个页面的数据
m0_60284090的博客
05-27 801
uniapp使用uni.navigateBack返回页面并修改上一个页面的数据
uniapp应用中使web-view页面(webview)返回上一页+注入js操作页面元素
CoolHea的博客
03-29 4156
@uniapp应用中使web-view页面(webview)返回上一页+注入js操作页面元素 uniapp应用中使web-view页面(webview)返回上一页+注入js操作页面元素 1：具体页面代码 2、代码解析： var currentWebview = this.scope.scope.scope.getAppWebview().children()[0]; 获取页面webview对象。 onReady() { var currentWebview = this.scop
uniapp 微信小程序自定义右上角返回按钮
weixin_46901857的博客
03-08 2583
微信小程序返回按钮自定义
uniapp 返回上一页 携带参数 （高频使用）
织网的博客
04-15 2541
返回的页面添加以下方法 //点击放回上一页 并且携带参数 addressClick(item) { console.log(item); let pages = getCurrentPages(); //获取所有页面栈实例列表 let nowPage = pages[pages.length - 1]; //当前页页面实例 let prevPage = pages[pages.length - 2]; //上一页页面实例 prevPage.$vm.address = item;
uni-app自定义键盘
09-07
Uni-app支持自定义键盘的开发，可以通过uni-app提供的组件和API来实现。 首先，你可以使用`<input>`组件或者`<textarea>`组件来创建文本输入框，然后使用`@focus`事件监听输入框的获取焦点事件，例如： ```html <template> <view> <input @focus="showCustomKeyboard" placeholder="请输入内容"></input> </view> </template> <script> export default { methods: { showCustomKeyboard() { // 在这里调用自定义键盘的显示逻辑 } } } </script> ``` 接着，在`showCustomKeyboard`方法中，你可以编写逻辑来显示自定义键盘。你可以使用uni-app提供的页面跳转API来跳转到一个包含自定义键盘的新页面，或者使用遮罩层和弹窗组件来实现在当前页面显示自定义键盘的效果。 例如，你可以使用uni-app提供的弹窗组件`<popup>`来实现自定义键盘的效果： ```html <template> <view> <input @focus="showCustomKeyboard" placeholder="请输入内容"></input> <popup v-model="showKeyboard" position="bottom" :style="{ height: '300rpx' }"> <!-- 自定义键盘的内容 --> </popup> </view> </template> <script> export default { data() { return { showKeyboard: false } }, methods: { showCustomKeyboard() { this.showKeyboard = true; } } } </script> ``` 以上代码中，`<popup>`组件通过`v-model`绑定了`showKeyboard`变量，当`showKeyboard`为`true`时，弹窗组件会显示出来，从而展示自定义键盘的内容。 注意，以上只是示例代码，具体实现方式可以根据你的需求进行调整和扩展。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值