Framework7 v1单视图应用导航冻结问题求助

我之前维护Framework7 v1项目时也碰到过几乎一模一样的情况——初期来回导航完全正常，切换几次后所有交互按钮（返回键、工具栏链接、侧边菜单）突然彻底卡死，但应用其他功能还能正常运行。结合你的描述，大概率是DOM元素内存泄漏或者页面切换时的事件/资源未正确清理导致的，给你几个针对性的排查和修复方案：

1. 检查页面事件的绑定与解绑 #

Framework7 v1的单视图模式下，如果在页面初始化时重复绑定全局事件（比如$(document).on('click', ...)），或者没在页面移除时解绑局部事件，多次切换后会积累大量重复的事件监听，最终阻塞JS线程，导致交互失效。

修复方案： #

所有事件都绑定在当前页面的容器内，并在页面移除前主动解绑：

// 页面初始化时绑定局部事件
$$(document).on('pageInit', '.page[data-page="your-target-page"]', function (e) {
  const currentPage = e.detail.page;
  // 事件绑定严格限定在当前页面容器内
  currentPage.container.on('click', '.custom-btn', function() {
    // 你的业务逻辑代码
  });
});

// 页面移除前解绑对应事件
$$(document).on('pageBeforeRemove', '.page[data-page="your-target-page"]', function (e) {
  const currentPage = e.detail.page;
  currentPage.container.off('click', '.custom-btn');
});

重点：绝对避免全局事件绑定，所有交互事件都要限定在当前页面的DOM范围内，这样移除页面时能统一清理，不会遗留冗余监听。

2. 优化页面缓存清理（针对domCache的补充） #

你试过domCache设为true或false但没效果，是因为Framework7 v1的缓存机制有时会偷偷保留已移除页面的DOM节点，导致节点堆积占用内存。可以手动干预缓存清理逻辑：

修复方案： #

在页面切换完成后，强制清理非当前页面的缓存DOM：

$$(document).on('pageAfterAnimation', function(e) {
  const currentPage = e.detail.page;
  const mainView = app.views.main;
  
  // 遍历缓存数组，移除非当前页面的DOM节点
  mainView.cache.forEach(function(pageCacheItem) {
    if (pageCacheItem.page.name !== currentPage.name) {
      pageCacheItem.page.container.remove();
    }
  });
  
  // 重置缓存数组，只保留当前页面的缓存
  mainView.cache = mainView.cache.filter(item => item.page.name === currentPage.name);
});

同时保持domCache: true，配合上面的缓存清理逻辑，比单纯关闭缓存的运行效率更高。

3. 清理页面遗留的定时器/异步请求 #

如果页面里有setInterval、setTimeout或者未完成的ajax请求，没有在页面移除时及时清除，长时间运行会持续占用CPU资源，最终拖垮页面交互。

修复方案： #

在pageBeforeRemove事件里主动清理这些资源：

let pageTimer;
$$(document).on('pageInit', '.page[data-page="timer-page"]', function (e) {
  // 初始化定时器
  pageTimer = setInterval(function() {
    // 定时更新逻辑
  }, 1000);
});

$$(document).on('pageBeforeRemove', '.page[data-page="timer-page"]', function (e) {
  // 清除定时器
  clearInterval(pageTimer);
  // 如果用了axios等异步库，记得取消未完成的请求
  // const cancelToken = axios.CancelToken.source();
  // cancelToken.cancel('页面已移除，取消请求');
});

4. 用浏览器工具定位阻塞点 #

如果上面的方案都没解决问题，打开Chrome DevTools的Performance面板（F12 → Performance），录制一段页面来回导航的操作，查看卡顿发生时哪个JS函数占用了大量CPU时间，精准定位问题代码段。

按照这些步骤排查，应该能解决你的导航卡顿问题——毕竟你提到其他功能正常，说明核心业务逻辑没问题，大概率是页面切换时的资源没有正确清理导致的内存泄漏。

内容的提问来源于stack exchange，提问作者Bill Hambone