uniApp实现页面刷新功能全过程图片演示全代码详细解释

最新推荐文章于 2025-03-20 10:27:17 发布

YIRC99

最新推荐文章于 2025-03-20 10:27:17 发布

阅读量2.8k

点赞数 7

文章标签： uni-app

本文链接：https://blog.csdn.net/Ciao345/article/details/131946956

版权

文章介绍了如何在uniApp中使用Vue2开发时实现页面刷新功能，特别是当需要根据用户输入的新IP地址重新发起网络请求时。通过getCurrentPages获取当前页面栈，然后利用uni.redirectTo进行页面跳转实现刷新。同时提到了JavaScript的location.reload()方法在小程序中不适用的情况。

摘要由CSDN通过智能技术生成

uniApp实现页面刷新功能全过程图片演示全代码详细解释

先说环境和需求

我是使用Vue2开发然后写的微信小程序和H5页面和安卓App 这是一个练手的项目
因为我的程序需要发起网络请求然后我有一个对话框输入ip地址容纳后更改输入完成之后然后确认就需要刷新页面重新发起请求向新的ip地址获取数据
如果你的需求跟我类似那么可以参考一下我的解决方法不是最优但是应该有效毕竟我当时没有在CSDN上找到答案
在这里插入图片描述

实现方式步骤

我这里简单介绍一下我的代码但是不做详细解释因为如果看不懂代码那么实现方式肯定也看不懂毕竟我就是怎么菜的

不过主要还是介绍刷新方法
图标的实现方法参考我之前的文章
这里我们点击图标之后跳转SetIpAddress方法在这里插入图片描述

方法内部

在这里插入图片描述

这里介绍红框的代码

let pages = getCurrentPages();
	首先，通过调用getCurrentPages()方法，
	我们可以获取到当前页面栈的所有页面组成的一个数组
	数组中第一个元素是最早打开的页面，最后一个元素是当前页面
let page = pages[pages.length - 1];
	然后，通过pages.length-1获取到页面栈中最后一个页面的索引值，
	也就是当前页面在页面栈中的位置
uni.redirectTo({url: page.$page.fullPath});
	uni.redirectTo()方法是uni-app框架提供的页面跳转方法，
	它会关闭当前页面，然后打开新的页面 url就是要跳转的路径
	page.$page是一个特殊的属性，表示当前页面的信息对象。
	它包含了当前页面的一些属性和方法
	page.$page.fullPath表示当前页面的完整路径，
	包括页面文件路径和参数等信息。这个完整路径可以用于页面跳转操作

当你理解了上面的内容 那么我注释掉的就已经也能看懂 
就是当前页面的路径自己写罢了 不如上面的通用 直接复制粘贴什么页面都能用

这里介绍一下紫框的代码

location.reload()
	这个是js的方法 小程序不可用 
	当调用location.reload()时，浏览器会重新加载当前页面，
	并重新发送一次请求来获取最新的页面内容。
	页面上的所有资源（如HTML、CSS、JavaScript等）都会重新加载，
	并且会触发页面的加载和刷新事件。