framework7-上拉刷新

官网地址：http://old.framework7.cn/Index/infinite_scroll.html

效果

 

一：样式

  <style type="text/css">
    .infinite-scroll-preloader {
        margin-top:-20px;
        margin-bottom: 10px;
        text-align: center;
    }
    .infinite-scroll-preloader .preloader {
        width:34px;
        height:34px;
    }     
    </style>

二：页面部分

 <div class="page-content infinite-scroll">           
 <!--搜索框start-->
 <div class="cus-header">
     <div class="nav-logo-img"></div>
     <input type="text" id="txtgoodsname" placeholder="请输入商品名称">
     <div id="search">搜索</div>
 </div>
 <!--搜索框end-->
 <div id="divGoods">     
 </div>
 <!-- Preloader -->
 <div class="infinite-scroll-preloader">
     <div class="preloader"></div>
 </div>
</div>       

三：脚本

  _IsLoading = false;

//下拉刷新
_LoadMore = function () {         
//一页数据
 if ((manger._whereData.PageIndex+1) > manger._whereData.total) {     
     // 没有更多的加载，分离无限滚动事件，以防止不必要的加载
     myApp.detachInfiniteScroll($$('.infinite-scroll'));
     //删除
     $$('.infinite-scroll-preloader').remove();
     return;
 }      
// Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () {
    // 正在执行加载
    if (_IsLoading) return;
    //设置加载中
    _IsLoading = true;
    // 加载
    setTimeout(function () {
        //加载完成
        _IsLoading = false;       

        _whereData.PageIndex += 1;
        _LoadList();

        //数据分页全部加载完成
        if (_whereData.PageIndex > _whereData.total) {           
            // 没有更多的加载，分离无限滚动事件，以防止不必要的加载
            myApp.detachInfiniteScroll($$('.infinite-scroll'));
            //删除
            $$('.infinite-scroll-preloader').remove();
            return;
        }
    }, 1000);
});
};