framework7框架中tab页面下拉刷新方案
- 2019 年 10 月 6 日
- 笔记
最近在使用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，还需要修改一下绑定的代码。
