首先还是应该将tabbar页面用nvue编写,就不会出现这种问题了。
但是我的使用了过多组件,相当于要重构了。。。就放弃改为nvue了。下面是我根据之前版本的方法修改的,大概能解决大部分问题?
先贴原来用的方法,这个是在社区找到的,新版不能使用原因请看注释
function reloadCurrentPage(_self, isTab = true) {
// #ifdef APP-PLUS
if (plus.os.name === 'iOS') {
var route = _self.$scope.route
var data = _self.$scope.options && _self.$scope.options.data
var url = '/' + route
if (data) {
url = '/' + route + '?data=' + data
}
var isRecovery = true;
const query = uni.createSelectorQuery().in(_self);
//新版本这里在获取节点失败后不再调用boundingClientRect方法了
query.select('#containerId').boundingClientRect(data => {
isRecovery = false
}).exec();
setTimeout(() => {
if (isRecovery) {
if (isTab) {
uni.reLaunch({
url
})
} else {
uni.redirectTo({
url
})
}
}
}, 600)
}
// #endif
}
然后我根据这个改了一版,在使用前需要以下条件
1、需要一个全局挂载的工具类,Vue.prototype.$utils = utils
2、在需要使用的页面(一般为tab页)最外层<view>需要设置为同一个class名称
3、在onshow方法调用
目前好像就tab页出现白屏比较严重,只需要在tabbar页使用应该就够了
let pageList = {};
const utils = {
reloadCurrentPage: function(_self, isTab = true) {
// #ifdef APP-PLUS
var route = _self.$scope.route
var data = _self.$scope.options && _self.$scope.options.data
var url = '/' + route
if (data) {
url = '/' + route + '?data=' + data
}
var isRecovery = true;
let newTime = Date.now();
if (pageList[url]) {
const query = uni.createSelectorQuery().in(_self);
//这里select()中替换为自己的样式class名称
query.select('.container').fields({size:true}, data => {
isRecovery = false
}).exec();
setTimeout(() => {
if (isRecovery) {
//如果获取不到节点
//确保只刷新一次
if (newTime - pageList[url] > 3000) {
//超过3秒才重新刷新,这里设置几秒就行,目的是防止无限刷新
//因为刷新后页面肯定会出来,但是立马再次调用该方法不一定能获取节点
pageList[url] = newTime;
if (isTab) {
uni.reLaunch({
url
})
} else {
uni.redirectTo({
url
})
}
}
}
}, 600)
} else {
pageList[url] = newTime;
}
// if (plus.os.name === 'iOS') {
// }
// #endif
}
}
11 个评论
要回复文章请先登录或注册
1***@qq.com
5***@qq.com
qiki08
5***@qq.com
5***@qq.com
Rongshi (作者)
5***@qq.com
Rongshi (作者)
码字如山
Rongshi (作者)