Framework7 v2日历实例页面切换后不可用，是否仅局限于页面作用域？

你猜的没错！在Framework7 v2里，直接用var calendar = ...创建的实例确实是绑定在当前页面的作用域内的，这就是切换页面后它失效的核心原因。

为什么会这样？ #

Framework7 v2的页面是独立的组件，每个页面都有自己的局部作用域，而且当你切换到其他页面时，原页面的DOM可能会被Framework7自动卸载（根据你的路由配置），或者原页面的局部变量会因为作用域销毁而无法访问。这时候就算你没手动销毁日历实例，它要么找不到绑定的#myCalendar元素，要么实例本身的上下文已经失效，自然没法正常工作。

解决办法有这几个，你可以根据场景选： #

• 把实例挂载到全局app对象上
  这样实例就脱离了页面局部作用域，全局都能访问，不会因为页面切换丢失：

  // 创建时挂载到app全局对象
  app.myCalendar = app.calendar.create({ inputEl: '#myCalendar' });
  
  // 后续在任何页面都可以这样调用
  app.myCalendar.open();
  

• 在页面生命周期事件里管理实例
  如果你只需要在特定页面使用日历，最好在页面的初始化和销毁事件里分别创建和销毁实例，匹配页面的生命周期：

  // 在页面的pageInit事件中创建实例
  $$(document).on('pageInit', '.page[data-page="your-page-name"]', function (e) {
    var page = e.detail.page;
    // 把实例存在page对象上，方便后续访问
    page.calendar = app.calendar.create({ 
      inputEl: page.el.querySelector('#myCalendar')
    });
  });
  
  // 在页面销毁前销毁实例，避免内存泄漏
  $$(document).on('pageBeforeRemove', '.page[data-page="your-page-name"]', function (e) {
    var page = e.detail.page;
    if (page.calendar) {
      page.calendar.destroy();
    }
  });
  

• 确保DOM元素不被销毁
  如果你的日历需要在多个页面共用，可以把#myCalendar元素放在主视图的固定区域（比如导航栏下方、页脚上方），或者放在不会被页面切换卸载的DOM节点里，这样实例绑定的元素始终存在，切换页面后也能正常使用。

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