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

  • 相关阅读:
    docker
    perl有用的字符串匹配
    nginx 反向代理 kuberntes service 出现 502 问题排查
    应用应用容器化部署最佳实践
    监控系统设计
    kubernetes events 事件机制源码分析
    golang gc 原理和内存分配
    golang 使用 websocket 实现后台消息分组推送
    kubeadm 创建的 k8s 集群的升级
    在 kubernetes pod 中构建 docker image
  • 原文地址:https://www.cnblogs.com/MrQinjj/p/12027297.html
Copyright © 2011-2022 走看看