页面跳转后返回之前页面数据全部重置刷新了
大概意思就是从a页面去b页面办了点事,在回到a页面时之前填写的数据没了,页面数据重置了怎么办,这个应该只有新手会犯这个错误,可以看看官方文档:uni-app页面跳转方法
可以看看你的代码,从b返回a是不是使用了uni.navigateTo({}) ,如果是返回直接使用uni.navigateBack()就可以了,使用uni.navigateTo({})视为打开一个新页面,所以你的数据都没了,uni.navigateBack()是返回上一页,只是返回,所以之前的数据状态都还在,如果你用的就是uni.navigateBack(),那检查下是不是写了相关函数,重置了页面填写的数据,或者调用了类似方法,正常返回是不会清空之前的数据的
// 路由跳转到非 tabBar页面使用uni.navigateTo({})
uni.navigateTo({
url: '/pages/index?id=1'
});
// 返回上一页
uni.navigateBack({});
// 返回上上一页
uni.navigateBack({
delta: 2
});
还有其他跳转方法我就不赘述了,可以去官网查看,也可以查看这篇文章:uni-app路由跳转及路由传参方法
第二个就是页面不刷新的问题了
这个简单,当你的数据发生变化后,页面视图如果没有随着改变只需要加上下面这个就OK了,这个属于双向绑定的问题,出现这个问题的几率相对来说比较小,如果出现问题,可以先试一下使用深拷贝看能否解决
// 比如页面中绑定了一个对象的数据
data: {
dataObj: {
name: '玛卡把卡',
age: 23
}
}
changeData() { // 数据改变赋值的时候使用深拷贝
let data = {
name: '草帽路飞',
age: 20
}
this.dataObj = JSON.parse(JSON.stringify(data ));
},
如果以上办法无法解决,用的框架是VUE的话,可以使用this.$forceUpdate(),这个方法就是用来强制刷新页面渲染数据的
this.$forceUpdate()强制刷新页面
如果你没有使用vue,那可以尝试下面方式解决,给未及时刷新的dom元素绑定一个KEY值:
<template>
<view>
<view class="module-box1" :key="moduleKey"></view>
<commponent1 v-if="PageCur=='commponent1'" :key="commponent1Key"></commponent1>
<commponent2 v-if="PageCur=='commponent2'" :key="commponent2Key"></commponent2>
<view class="module-box2">
<button @tap="tapMenu" :data-cur="commponent1">按钮1</button>
<button @tap="tapMenu" :data-cur="commponent2">按钮1</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
PageCur: 'commponent1',
moduleKey: 0,
commponent1Key: 0,
commponent2Key: 0,
},
};
},
onLoad() {
//获取数据
this.getData()
},
methods: {
getData() {
var that = this
//获取数据
uni.request({
url: 'https://www.example.com/request',
success: (res) => {
console.log(res.data);
//相关处理
//最后更新相应模块或组件的key
++that.moduleKey
++that.commponent1Key
++that.commponent2Key
}
});
},
tapMenu(e) {
var that = this
this.PageCur = e.currentTarget.dataset.cur
},
}
</script>
好了,希望可以帮你解决问题!,今天的分享到这,你学废了吗?