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，還需要修改一下綁定的程式碼。
