TLingC's Zone
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,还需要修改一下绑定的代码。

赞赏
首页      开发      framework7框架中tab页面下拉刷新方案

发表评论

textsms
account_circle
email

TLingC's Zone

framework7框架中tab页面下拉刷新方案
最近在使用framework7框架开发web app,发现在tab页面中直接定义多个ptr-content会导致异常。最后绑定用户点击tab的事件,动态解绑/绑定ptr后解决。 在HTML中这样定义ptr,只需在tab-1(…
扫描二维码继续阅读
2018-05-29
标签
功能