html结构
<div class="page"> <!-- Page content should have additional "pull-to-refresh-content" class --> <div class="page-content pull-to-refresh-content" data-ptr-distance="55"> <!-- Default pull to refresh layer--> <div class="pull-to-refresh-layer"> <div class="preloader"></div> <div class="pull-to-refresh-arrow"></div> </div> <!-- usual content below --> <div class="list-block"> ... </div> </div> </div>
js调用
var myApp = new Framework7(); var $$ = Dom7; // Pull to refresh content var ptrContent = $$('.pull-to-refresh-content'); // Add 'refresh' listener on it ptrContent.on('refresh', function (e) { // Emulate 2s loading setTimeout(function () { //刷新操作// When loading done, we need to reset it myApp.pullToRefreshDone(); }, 2000); });