一、微信小程序多次跳转会产生卡顿的原理
通过wx.navigateTo 跳转,都会出现保留当前页面,打开新的页面机制。
wx.navigateTo不会将旧页面出栈,会将新页面入栈(栈内元素个数增加,栈内元素5个时,不能再跳转)。手机性能好点,可能10次左右才会导致小程序跳转卡顿崩溃。
二、解决方法:
1、减少wx.navigateTo的使用,看看能不能用wx.redirectTo代替其跳转。
2、如果已经有缓存栈内,是否可以直接将跳转新的页面(有缓存栈),相当于wx.navigateBack返回缓存栈页面。然后修改数据刷新数据即可。
可以将跳转方法统一封装一下如下操作:
//统一跳转 go_to('navigateTo','pages/index/index','keyword=张三&name=李四','get_DataList')
function go_to(type,url,parameter,execute_method){
let that = this;
let pages = getCurrentPages();
if(pages[pages.length-1].route == url){
wx.showToast({
title: '已在当前页面~',
icon:'none',
duration: 1500
});
return false;
}
for(let index in pages){ //若存在缓存页面,返回当前页面,parameter不为空时,将会更改返回页面的setdata值(注意:只能改变一个值)
if(pages[index].route == url){
if(parameter!=undefined){//设置data数据
let arr = parameter.split('&');
arr.forEach(item => {
let newArr = item.split('=')
pages[index].setData({
[newArr[0]]:newArr[1]
});
});
}
if(execute_method!=undefined){//执行页面方法
pages[index][execute_method]();
}
wx.navigateBack({
delta: index
});
return false;
}
}
parameter!=undefined?url = '/'+url+'?'+parameter:url = '/'+url;
switch (type) {
case 'navigateTo':
wx.navigateTo({
url:url
});
break;
case 'redirectTo':
wx.redirectTo({
url:url
});
break;
case 'switchTab':
wx.switchTab({
url:url
});
break;
case 'reLaunch':
wx.reLaunch({
url:url
});
break;
default:
wx.navigateTo({
url:url
});
break;
}
}
然后在相应的位置引入跳转即可。同一个页面跳转到同一个页面,建议直接刷新数据即可,封装的方法里面未做处理。
三、方法简单通用,调用即可。