一、微信小程序多次跳转会产生卡顿的原理

通过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;
  }

  var delta = 0;
  for (var i = pages.length - 1; i >= 0; i--) {//若存在缓存页面,返回当前页面,parameter不为空时,将会更改返回页面的setdata值(注意:只能改变一个值)
    if (pages[i].route == url) {
      if (delta == 0) {
        return;
      }
      if(parameter){//设置data数据
        let arr = parameter.split('&');
        arr.forEach(item => {
          let newArr = item.split('=')
            pages[i].setData({
              [newArr[0]]:newArr[1]
            });
        });
      }
      if(execute_method){//执行页面方法
        pages[i][execute_method]();
      }
      wx.navigateBack({ delta: delta });
      return false;
    }
    delta++;
  }
  parameter?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;
  }
}

然后在相应的位置引入跳转即可。同一个页面跳转到同一个页面,建议直接刷新数据即可,封装的方法里面未做处理。

三、方法简单通用,调用即可。

更多推荐