uniapp中刷新本页面的三种方法

 更新时间:2023年10月11日 15:54:46   作者:DC...  
这篇文章主要给大家介绍了关于uniapp中刷新本页面的三种方法,刷新页面的具体逻辑可以根据实际需求进行编写,文中通过代码介绍的非常详细,需要的朋友可以参考下

方法一

利用路由,强制uniapp刷新当前页面

setTimeout(() => {
	this.$router.go(0)
}, 500)

方法二

关闭当前页面,跳转到应用内的某给页面(如果想刷新当前页面也可以使用该方法):

uni.redirectTo({
    url: '../details/details?gid=' + this.gid //写你的路径
});

还可用定时器来对该方法进行优化,使其稍微延缓动画

setTimeout( () => {
    uni.redirectTo({
       url: '../details/details?gid=' + this.gid
    });	
}, 500)

方法三

通过获取该页面实例执行其内部的生命周期方法来刷新页面

    reload() {
        // 页面重载
        const pages = getCurrentPages()
        // 声明一个pages使用getCurrentPages方法
        const curPage = pages[pages.length - 1]
        // 声明一个当前页面
        curPage.onLoad(curPage.options) // 传入参数
        curPage.onShow()
        curPage.onReady()
        // 执行刷新
    },

补充:uniapp如何根据路由手动onload刷新某一个页面

uniapp如何手动刷新要跳转到的页面?相信很多人百度查到的答案都是如下:

uni.switchTab({
  url: '/pages/user/user',
  success(){
	     let page = getCurrentPages().pop(); //跳转页面成功之后
             if (!page) return;  
             page.onLoad(); //重新刷新页面
	  }
});

但是在我做的项目中,会出现莫名的bug,pop出来的页面不是想要的,而且后面修改页面跳转的时候可能要修改代码,根据页面栈pop出来页面刷新很难定位刷新到我们想要的页面。那么有没有什么办法可以根据路由定位到我们要刷新的页面呢,根据官方api,我们可以获取已渲染加载的页面数组let pages = getCurrentPages(),同时每一个页面都有page.route()获取该页面的路由。所有我们只要遍历已渲染加载的pages,再比较pages里面的路由在调用相应页面的onload事件就好了,代码如下:

uni.switchTab({
				url : '/pages/test/test',
				success() {
					let pages = getCurrentPages();
					for(let i = 0; i < pages.length; i ++){
						let tmppg = pages[i];
						if(tmppg.route == "pages/test/test"){
							tmppg.onLoad();
						}
						// console.log('tmppg:' + tmppg)
						// console.log('tmppg.route:' + tmppg.route)
					}
				}
			})

总结 

到此这篇关于uniapp中刷新本页面的三种方法的文章就介绍到这了,更多相关uniapp刷新本页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 原生JS 实现的input输入时表格过滤操作示例

    原生JS 实现的input输入时表格过滤操作示例

    这篇文章主要介绍了原生JS 实现的input输入时表格过滤操作,结合实例形式分析了JavaScript基于页面元素遍历、运算、判断实现的表格过滤相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • firebug的一个有趣现象介绍

    firebug的一个有趣现象介绍

    在FIREBUG里如果一个对象同时拥有length属性和splice方法,就会被firebug显示为数组的形式
    2011-11-11
  • 浅谈微信小程序列表埋点曝光指南

    浅谈微信小程序列表埋点曝光指南

    这篇文章主要介绍了微信小程序列表埋点曝光指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 详解JavaScript中数组的一些特殊用法

    详解JavaScript中数组的一些特殊用法

    数组是几乎所有编程语言的基础语法,本文将不会介绍数组的基础语法和用法,而是从JavaScript中数组的一些特殊之处入手,通过这些少有特性的详细介绍,加深我们对数组的理解
    2023-02-02
  • 微信小程序实现倒计时功能

    微信小程序实现倒计时功能

    这篇文章主要为大家详细介绍了微信小程序实现倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • javascript面向对象包装类Class封装类库剖析

    javascript面向对象包装类Class封装类库剖析

    一个从来没有接触过javascript的技术人员,几小时内就可以写出一个简单有用的程序代码;想写出高性能的代码,同样需要具备一个高级程序员的基本素养,javascript也是如此
    2013-01-01
  • javascript继承机制实例详解

    javascript继承机制实例详解

    这篇文章主要介绍了javascript继承机制,以实例形式详细分析了javascript继承的原理与基于原型链的继承实现方法,具有不错的参考借鉴价值,需要的朋友可以参考下
    2014-11-11
  • js判断移动端横竖屏视口检测实现的几种方法

    js判断移动端横竖屏视口检测实现的几种方法

    最近做歌一个小项目,但是要放到我们的app上,然而需要横竖屏使用不同的样式,本文就来介绍一下js判断移动端横竖屏视口检测实现的几种方法,感兴趣的可以了解一下
    2021-07-07
  • JavaScript实现身份证验证代码实例

    JavaScript实现身份证验证代码实例

    这篇文章主要介绍了JavaScript实现身法证验证代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 表单验证正则表达式实例代码详解

    表单验证正则表达式实例代码详解

    这篇文章主要介绍了表单验证正则表达式实例代码详解的相关资料,需要的朋友可以参考下
    2015-11-11

最新评论