当前位置: 首页 > news >正文

uni-app:切换页面刷新,返回上一页刷新(onShow钩子函数的使用)

切换页面刷新:通过onShow()便可实现

返回上一页通过uni.navigateBack({delta: 1});实现

以返回上一页刷新为例

从B页面返回上一页到A页面

在A页面写入方法refreshHandler()

methods: {	// 执行刷新逻辑refreshHandler() {uni.request({url: getApp().globalData.position + 'Produce/select_producting',data: {username: getApp().globalData.username},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {this.info = res.data.info;},fail(res) {console.log("查询失败")}})}
},

在A页面写入onLoad(),onShow()

 onLoad():首次进入页面时执行的方法,这里直接引入refreshHandler() 可以直接查询到页面数据

onShow():进入页面执行的方法,主要切换到本页面就会执行该方法,这里也是直接引入refreshHandler()函数,可以在每次进入页面时,执行数据刷新(写入onShow(),便可解决进入页面不刷新的问题,返回上一页刷新的问题也会解决)

//刚进入页面执行的操作
onLoad() {this.refreshHandler()
},
//进入页面这行的操作
onShow() {this.refreshHandler()		
}

在B页面执行返回A页面的操作

methods: {is_back(e) {console.log('返回')uni.showToast({title: '成功',})setTimeout(function() {//返回上一页uni.navigateBack({delta: 1,});}, 500)},
},

核心

uni.navigateBack({
        delta: 1,
 });

这段代码的作用是返回上一个页面,delta参数指定了返回的层数。在这里,delta为1表示返回上一层(即当前页面的前一个页面)。

注:uni.navigateBack函数是由uni-app框架提供的,用于在多页面应用中返回上一个页面。它类似于浏览器的后退按钮功能。

如果你希望执行该函数后刷新上一个页面,你可以使用下面的方式:

当成功返回上一个页面后,会调用上一个页面的onLoad生命周期函数进行刷新操作。

uni.navigateBack({
    delta: 1,
    success: function () {
        const pages = getCurrentPages(); //获取当前页面栈
        const prevPage = pages[pages.length - 1]; //获取上一个页面实例对象
        prevPage.onLoad(); //调用上一个页面的onLoad方法
    }
});

http://www.lryc.cn/news/96531.html

相关文章:

  • 全志F1C200S嵌入式驱动开发(调整cpu频率和dram频率)
  • idea 设置了 vm options后无法启动
  • TPS54620RHLR是一款同步降压转换器
  • 主机漏洞利用演示MS17-010(永恒之蓝)
  • 2023年第六届河北省研究生数学建模竞赛题目B题Python求解代码
  • 【三维点云处理】顶点、面片、邻接矩阵、邻接距离矩阵以及稀疏存储概念
  • ansible 中的fetch模块的作用是什么
  • Zabbix-6.4.4部署及监控配置
  • 解决 npm ERR! missing script: build 错误的方法
  • json-server创建静态服务器2
  • 开源视频监控管理平台国标GB28181视频EasyCVR电子地图功能展示优化
  • 端口复用与重映射
  • ros2 launch 集合 gazebo yolov8 rviz2
  • SD NAND【商业】
  • 实现任意进制(2—32)转换
  • Spring Boot 集成 Redis 三种模式实践汇总
  • MySQL DQL语法
  • 算法之线性表1.1.1(7)带头结点链表的反向输出
  • 设计模式三:抽象工厂模式(Abstract Factory Pattern)
  • Linux用户权限问题详解
  • flask中的session介绍
  • 记录联想拯救者R720重装系统
  • Spring Alibaba Sentinel实现集群限流demo
  • 102、SOA、分布式、微服务之间有什么关系和区别?
  • Ubuntu 20.04下的录屏与视频剪辑软件
  • 面试题 -- iOS数据存储
  • spring复习:(51)environment、systemProperties、systemEnvironment三个bean是在哪里被添加到容器的?
  • element ui 上传控件携带参数到后端
  • scrapy分布式+指纹去重原理
  • FileHub使用教程:Github Token获取步骤,使用快人一步