小程序如何刷新当前页面

1. 使用 uni.reload() 方法

适用场景:需要更新数据和重新渲染页面的情况。

使用方法

  • 在页面中添加一个按钮或其他触发元素,绑定点击事件。
  • 在点击事件的处理函数中调用 uni.reload() 方法。

示例代码

复制代码

html复制代码

|---|-----------------------------------------------|
| | <template> |
| | <view> |
| | <button @click="refreshPage">刷新页面</button> |
| | </view> |
| | </template> |
| | |
| | <script> |
| | export default { |
| | methods: { |
| | refreshPage() { |
| | uni.reload(); // 刷新当前页面 |
| | } |
| | } |
| | } |
| | </script> |

2. 使用 location.href 属性

适用场景:修改URL地址实现重新加载当前页面。

使用方法

  • 类似于 uni.reload(),也是在点击事件的处理函数中操作。
  • 但这里是通过将 location.href 设置为当前页面的URL地址来实现页面刷新。

示例代码

复制代码

html复制代码

|---|-----------------------------------------------|
| | <template> |
| | <view> |
| | <button @click="refreshPage">刷新页面</button> |
| | </view> |
| | </template> |
| | |
| | <script> |
| | export default { |
| | methods: { |
| | refreshPage() { |
| | location.href = location.href; // 重新加载当前页面 |
| | } |
| | } |
| | } |
| | </script> |

3. 使用 this.onLoad()this.onReady() / this.onShow()

适用场景

  • this.onLoad() 适用于本次操作对页面 onLoad 函数所携带的各种参数没有影响的情况。
  • this.onReady()this.onShow() 适用于需要在页面加载完成或显示时执行某些操作的情况。

使用方法

  • this.onLoad():在操作函数中调用,并传入之前保存的 options 参数(如果有的话)。
  • this.onReady()this.onShow():在操作函数中直接调用,但需要注意它们的使用前提。

注意 :使用 this.onLoad()this.onReady() / this.onShow() 并不是真正的"刷新"页面,而是重新执行了页面的某些生命周期函数。因此,它们更适用于在特定情况下重新加载页面数据或执行某些操作,而不是简单地刷新整个页面。

相关推荐
再学一点就睡4 分钟前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20207 分钟前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象7 分钟前
flutter第二话题-布局约束
前端
龙在天9 分钟前
我是前端,scss颜色函数你用过吗?
前端
Mapmost16 分钟前
单体化解锁3DGS场景深层交互价值,让3DGS模型真正被用起来!
前端
幻灵尔依43 分钟前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子43 分钟前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳1 小时前
CSS 基础概念
前端·css·css3
前端小巷子1 小时前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar1 小时前
AI教你常识之 npm / pnpm / package.json
前端