小程序如何刷新当前页面

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() 并不是真正的"刷新"页面,而是重新执行了页面的某些生命周期函数。因此,它们更适用于在特定情况下重新加载页面数据或执行某些操作,而不是简单地刷新整个页面。

相关推荐
SEO_juper10 分钟前
新独立站冷启动收录全攻略:配置、推送、抓取配额优化完整手册
前端·谷歌·seo·跨境电商·外贸·geo·独立站
TinssonTai14 分钟前
这个 VS Code 插件让我的 AI Coding 又快又稳 - 旧瓶装新酒
前端·人工智能·程序员
体验家15 分钟前
体验家 XMPlus 网页端问卷 SDK 技术解析:用几行 JavaScript 实现精准场景触发与防打扰机制
开发语言·前端·javascript
VidDown20 分钟前
VidDown 工具站:视频分辨率技术
javascript·网络·编辑器·音视频·视频编解码·视频
Maimai1080829 分钟前
Web3 前端交易系统如何落地:从下单 UI 到 Operation 编码、签名与实时状态更新
前端·react.js·ui·架构·前端框架·web3
kidding72338 分钟前
高效备忘清单工具类小程序
前端·计算机网络·微信小程序·小程序
黄华SJ520it1 小时前
二二复制公排模式小程序开发全解析
小程序
IMPYLH1 小时前
HTML 的 <abbr> 元素
前端·算法·html
小鹿软件办公1 小时前
倒计时开启:Chromium 宣布几周内将全面切断 MV2 扩展支持
开发语言·javascript·ublock origin
李白的天不白1 小时前
Tree-Shaking
前端