zoukankan      html  css  js  c++  java
  • 用jquery写一个上拉加载


    /*可加载页面吗*/
    function canLoadMore() {
    return $('.loadin').length < 1;
    }
    /*移除正在加载字样*/
    function removeMore() {
    $('.loadin').remove();
    }
    /*没有更多内容字样*/
    function noMore($contentBox) {
    $('.loadin').html('<div style="color: #999;font-size: 36px">没有更多了...</div>');
    }
    /*设置正在加载*/
    function setMore($contentBox) {
    $contentBox.append(
    '<div class="loadin"><img src="../images/toLoad/toLoad.gif" alt=""></div>'
    );
    }

    /**
    * 加载页面
    * @param $contentBox object 容器
    * @param url string 翻页请求的url
    * @param $scrollBox object 容器
    * @param param object 请求参数
    * @param afterMoreMethod function
    */
    function pageMore($contentBox,url,$scrollBox=null,param=null,afterMoreMethod=null){
    // alert()
    console.log($contentBox)
    if($contentBox.length < 1)
    return ;

    if($scrollBox == null)
    $scrollBox = $contentBox;

    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0; //滚动到的当前位置
    //滚动时候获取显示区域高度
    var hi = parseInt($scrollBox.get(0).offsetHeight);
    console.log(hi,"offset");
    $scrollBox.scroll(function () {
    hi = hi == 0 ? parseInt($scrollBox.get(0).offsetHeight) : hi;
    nScrollHight = $(this)[0].scrollHeight;
    nScrollTop = $(this)[0].scrollTop;
    var paddingBottom = parseInt($(this).css('padding-bottom')),
    paddingTop = parseInt($(this).css('padding-top'));

    console.log(nScrollHight, nScrollTop + paddingBottom + paddingTop + hi, hi);
    if (nScrollTop + paddingBottom + paddingTop + hi >= nScrollHight) {
    more();
    }
    });

    $contentBox.data('page-num',1);

    function more() {
    if(!canLoadMore()) return;
    setMore($contentBox);
    var page_num = $contentBox.data('page-num');
    page_num = parseInt(page_num) + 1;
    param = param ? param : Object();
    param.page_num = page_num;
    $.get(url,param,function(result){
    if(result.code==1){
    $contentBox.append(result.data.html);
    $contentBox.data('page-num',page_num);
    removeMore();
    if(afterMoreMethod!==null)
    afterMoreMethod();
    }else{
    noMore();
    }
    },'json')
    }
    }

    调用时候直接pageMore($('参数一'),null,$('参数二')),

    d

  • 相关阅读:
    用Aspose.Cells控件读取Excel
    win8 X64 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序
    sql添加自动增长列
    TextBox控件设置ReadOnly=true后台取不到值三种解决方法(转)
    Winform程序以Icon的形式显示在任务栏右下角
    【默默努力】fishingGame
    【默默努力】h5-game-heroVSmonster
    【默默努力】h5-game-blockBreaker
    【默默努力】ig-wxz-and-hotdog
    vue-property-decorator用法
  • 原文地址:https://www.cnblogs.com/MrQinjj/p/12027297.html
Copyright © 2011-2022 走看看