uni-app状态改变页面不刷新

本文介绍在uni-app中解决状态改变后页面不刷新的问题,通过使用页面重定向及延时器,确保操作成功提示可见,适用于带有参数的页面路由。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

uni-app状态改变页面不刷新解决

最近在写uni-app项目的时候遇到了很多一波操作之后需要刷新页面的问题,用过好几种方法似乎都不起作用,最后通过对页面重定向之后解决了。具体用法很简单,话不多说,直接贴代码

this.$request(param).then(res => {
  				if (res.state == 200) {
  					this.$refs.popSettle.close()
  					uni.showToast({
  						title:'操作成功!'
  					})
  					setTimeout(()=>{
  						uni.redirectTo({
  							url:'/pages/shopping_center/settleDetail?billSn='+this.billSn,
  						})
  					},1500)
  				} else {
  					this.$api.msg(res.msg);
  				}
  			})

这里有两处说明:
一、如果当页面路由是有参数的,重定向时直接把参数带上即可
二、加延时器的作用是因为关闭popup弹出层后给出提示"操作成功!",这里提示时间延时默认是1500ms,如果不加延时器则调完接口后就直接跳转了,提示信息就看不见了。

最后,希望这篇文章能帮助到你!哈哈哈!

uni-app中,页面刷新可以分为两种情况:全局刷新和局部刷新。 1. 全局刷新 对于全局刷新,可以在页面中添加一个下拉刷新插件,用户下拉页面即可触发刷新事件。具体实现方法如下: 1)在页面中引入下拉刷新插件,如“uni-scroll-into-view”; 2)在页面的json文件中配置“enablePullDownRefresh”为true,表示启用下拉刷新功能; 3)在页面的js文件中添加“onPullDownRefresh”事件,当用户下拉页面时,此事件将被触发。 示例代码: <template> <view> <uni-scroll-into-view class="scroll"> <!-- 页面内容 --> </uni-scroll-into-view> </view> </template> <script> export default { onPullDownRefresh() { // 下拉刷新事件处理 } } </script> <style> .scroll { height: 100vh; overflow-y: scroll; } </style> 2. 局部刷新 对于局部刷新,可以使用uni-app中提供的Vuex状态管理机制。当页面数据改变时,使用Vuex来管理数据,并通知组件更新。具体实现方法如下: 1)在页面中引入Vuex,并使用state存储页面数据; 2)在组件中使用computed计算属性获取state中的数据; 3)当页面数据发生变化时,通过commit提交mutation更新state中的数据,从而触发computed计算属性的更新。 示例代码: // store.js文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 0 } const mutations = { increment(state) { state.count++ } } export default new Vuex.Store({ state, mutations }) // 页面文件 <template> <view> {{ count }} </view> </template> <script> import { mapState } from 'vuex' export default { computed: mapState(['count']) } </script> <style> view { font-size: 50px; text-align: center; } </style> // 修改count的值 this.$store.commit('increment')
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值