framework7框架中tab页面下拉刷新方案

最近在使用framework7框架开发web app，发现在tab页面中直接定义多个ptr-content会导致异常。最后绑定用户点击tab的事件，动态解绑/绑定ptr后解决。

在HTML中这样定义ptr，只需在tab-1（首屏）中设置ptr-content即可，用户切换tab时再去把ptr-content class赋值到对应的tab中。

<div class="tabs">
  <div id="tab-1" class="page-content tab tab-active ptr-content">
    <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
    </div>
    ......
  </div>
  <div id="tab-2" class="page-content tab">
    <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
    </div>
    ......
  </div>
  <div id="tab-3" class="page-content tab">
    <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
    </div>
    ......
  </div>
  ....
</div>

JS代码这样设置，注意我这里由于兼容性原因没有把Dom7定义为$$，如果你定义了Dom7为$$，直接把Dom7改为$$即可。

另外特别注意的是当用户切换tab后，必须先调用一次ptr.done()来让当前的refreshing停止，否则在refreshing时切换会出现奇怪的问题。

Dom7('#tab-1').on('ptr:refresh', function (e) {
    //Do something
    app.ptr.done();
});
Dom7('#tab-2').on('ptr:refresh', function (e) {
    //Do something
    app.ptr.done();
});
Dom7('#tab-3').on('ptr:refresh', function (e) {
    //Do something
    app.ptr.done();
});
Dom7('a[href="#tab-1"]').on('click', function (e) {
    app.ptr.done();
    app.ptr.destroy('.ptr-content');
    Dom7('.ptr-content').removeClass("ptr-content");
    Dom7('#tab-1').addClass("ptr-content");
    app.ptr.create('#tab-1');
});
Dom7('a[href="#tab-2"]').on('click', function (e) {
    app.ptr.done();
    app.ptr.destroy('.ptr-content');
    Dom7('.ptr-content').removeClass("ptr-content");
    Dom7('#tab-2').addClass("ptr-content");
    app.ptr.create('#tab-2');
});
Dom7('a[href="#tab-3"]').on('click', function (e) {
    app.ptr.done();
    app.ptr.destroy('.ptr-content');
    Dom7('.ptr-content').removeClass("ptr-content");
    Dom7('#tab-3').addClass("ptr-content");
    app.ptr.create('#tab-3');
});

注意我这里没有考虑使用API切换tab的情况，如果使用API，还需要修改一下绑定的代码。