jquery 下拉自动加载

function Map() //自定义map
{
    this.container = new Object();
}

Map.prototype.put = function(key, value)
{
    this.container[key] = value;
};

Map.prototype.get = function(key)
{
    return this.container[key];
};

Map.prototype.keySet = function()
{
    var keyset = new Array();
    var count = 0;
    for (var key in this.container)
    {
        // 跳过object的extend函数
        if (key == ‘extend‘)
        {
            continue;
        }
        keyset[count] = key;
        count++;
    }
    return keyset;
};

/**
 * 保存所有刷新器,键是containerId + "_loadBtn"
 */
pullToRefreshers = new Map();
/**
 * 自动加载
 */

var PullToRefresh = function(containerId, getDataFunc, loadOnInit, manualLoad) //下拉调用
{
    this.containerId = containerId; //为tag名字
    this.getDataFunc = getDataFunc; //获取下一页的函数    this.loadOnInit = loadOnInit;

    //loadOnInit为true时,自动加载完将触发scroll事件,需要忽略
    this.firstLoad = true;

    /**
     *正在加载
     */
    this.loading = false;

    pullToRefreshers.put(containerId + "_loadBtn", this);

    this.onScroll = function()
    {
        if(pullToRefreshers.get(containerId + "_loadBtn").loadOnInit
                && pullToRefreshers.get(containerId + "_loadBtn").firstLoad)
        {
            pullToRefreshers.get(containerId + "_loadBtn").firstLoad = false;
            return;
        }
        if(!pullToRefreshers.get(containerId + "_loadBtn").loading)
        {
            //兼容各浏览器
            var clientHeight = document.documentElement.clientHeight;
            if(clientHeight == 0)
            {
                clientHeight += document.body.clientHeight;
            }
            var scrollTop = document.documentElement.scrollTop;
            if(scrollTop == 0)
            {
                scrollTop += document.body.scrollTop;
            }
            var scrollHeight = document.documentElement.scrollHeight;
            if(scrollHeight == 0)
            {
                scrollHeight += document.body.scrollHeight;
            }

            //滚动到底部
            if(clientHeight+scrollTop>=scrollHeight)
            {
                pullToRefreshers.get(containerId + "_loadBtn").loadNextPage();
            }
        }
    };

    this.loadNextPage = function ()
    {
        loading = true;
        var data = getDataFunc();

        if(manualLoad)
        {
            $("#" + containerId + "_loadBtn").remove();
        }

        $("#" + containerId).append(data);

        if(manualLoad)
        {
            var loadBtn = "<div id=‘"
                + containerId
                + "_loadBtn‘"
                + " class=‘col-xs-12‘ style=‘cursor:pointer; text-align:center;‘ onclick=‘pullToRefreshers.get(this.id).loadNextPage()‘>加载更多...</div>";
            $("#" + containerId).append(loadBtn);
        }
        loading = false;
    };

    if(manualLoad)
    {
        var loadBtn = "<div id=‘"
            + containerId
            + "_loadBtn‘"
            + " class=‘col-xs-12‘ style=‘cursor:pointer; text-align:center;‘ onclick=‘pullToRefreshers.get(this.id).loadNextPage()‘>加载更多...</div>";
        $("#" + containerId).append(loadBtn);
    }
    else
    {
        window.onscroll = this.onScroll;
    }

    if(loadOnInit)
    {
        this.loadNextPage();
    }

};

goodsList.tag

<%@ tag body-content="empty" pageEncoding="UTF-8"  isELIgnored="false"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%-- goodsList是静态限时的商品列表,与nextPageFunc不能同时存在 --%>
<%@ attribute name="goodsList" required="false" rtexprvalue="true" type="java.util.List"%>  

<%-- nextPageFunc是动态加载商品列表时调用的action名称,与goodsList不可同时存在  --%>
<%@ attribute name="nextPageFunc" required="false" rtexprvalue="false" type="java.lang.String"%>  

<%-- loadOnInit为"true"时,打开页面会自动请求一次数据  --%>
<%@ attribute name="loadOnInit" required="false" rtexprvalue="false" type="java.lang.String"%>  

<%-- manualLoad为"true"时,滚动页面不会自动加载数据,需要点击加载更多按钮  --%>
<%@ attribute name="manualLoad" required="false" rtexprvalue="false" type="java.lang.String"%>  

<%-- 生成nextPageFunc所需参数的js方法名  --%>
<%@ attribute name="paramFunc" required="false" rtexprvalue="false" type="java.lang.String"%>
<script type="text/javascript">
$(function(){
    /* document.getElementById("centerButton").style.top=(document.documentElement.scrollTop)+"px";
    document.getElementById("centerButton").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("centerButton").offsetWidth)+"px";

 */
    if("${nextPageFunc}" != "")
    {
        new PullToRefresh("goodsList",  nextPage, ${true == loadOnInit}, ${true == manualLoad});
    }
});

var currentPage = 1;
var numPerPage = 10;

<c:if test="${not empty paramFunc}">
var customParam = ${paramFunc}();
</c:if>

function nextPage()
{
    <c:if test="${not empty paramFunc}">
    var param = customParam;
    </c:if>
    <c:if test="${empty paramFunc}">
    var param = {};
    </c:if>
    param["currentPage"] = currentPage;
    param["numPerPage"] = numPerPage;

    var data = eval(invokeJava("${nextPageFunc}", param));

    var dom = "";
    for(var o in data)
    {
         dom += ‘<div class="col-xs-6" onclick="buy(‘ + data[o].goodsId + ‘)" style="cursor:pointer"><ul class="ul2"><img src="‘ +
               data[o].picUrl + ‘"/><br>‘
               +‘<li style="color: #b7b7b7; font-size: 12px;">‘+data[o].storeName + ‘</li>‘
               +‘<li style="color: #929292; font-size: 14px;">‘+ data[o].goodsName + ‘</li>‘
               + ‘<li style="color: #ef3646; font-size: 15px;">‘+data[o].discount + ‘</li>‘
               +‘<li style="color: #959595; font-size: 12px;">‘+data[o].price + ‘</li>‘
               + ‘<li><i class="glyphicon glyphicon-shopping-cart"></i><p>购买</p></li>‘
               +‘</ul>‘+‘<br></div>‘
        /* dom += ‘<div class="col-xs-6" onclick="buy(‘ + data[o].goodsId + ‘)" style="cursor:pointer"><img src="‘ + data[o].picUrl + ‘"/><br>‘ + data[o].goodsName + ‘<br></div>‘ */
    }

    currentPage++;
    /* dom + = ‘<div name="centerButton" id="centerButton"><i class="glyphicon glyphicon-th-large"></i></div>‘ */
    return dom;
}

function buy(goodsId)
{
    document.location = "/UshequMobile/getGoodsInfo_Goods?goodsId=" + goodsId;
}
</script>
<div id="goodsList">
    <c:forEach var="goods" items="${goodsList}" varStatus="status">
        <div class="col-xs-6" onclick="buy(${goods.goodsId})" style="cursor:pointer">
            <img src="${goods.picUrl}"/><br>
            ${goods.goodsName}<br>
        </div>
    </c:forEach>
</div>

页面调用

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 2 <%@taglib prefix="hs" tagdir="/WEB-INF/tags" %>
 3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 4 <!DOCTYPE html>
 5 <html lang="zh-cn">
 6   <head>
 7     <title>热销商品</title>
 8 <script type="text/javascript">
 9       $(function()
10      {
11         $("#flag").val( "${flag}");
12     });
13
14      function getParam()
15      {
16          var data={};
17          data["flag"] = "${flag}";
18
19          return data;
20      }
21
22     </script>
23   </head>
24   <body>
25     <div class="container">
26         <div class="row">
27             <div class="col-xs-12" id="refreshContainer">
29                   <hs:goodsList nextPageFunc="getHotSellGoodsAjax" paramFunc="getParam" loadOnInit="true" manualLoad="false"/>
30             </div>
31
32         </div>
33     </div>
34 </body>
35 </html>
36  
时间: 2024-10-12 00:51:44

jquery 下拉自动加载的相关文章

页面滚动动态加载数据,页面下拉自动加载内容 jquery

<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type="text/javascript"></ script> < script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px var

JS下拉自动加载

导入jquery.mousewheel.js 定义url=路径 JS 1 $(function(){ 2 /* 3 * 滑动加载 4 * */ 5 var page = 1; 6 var end = 0; //1代表全部加载完毕 7 var plist = $('.product-list'); 8 function getData(){ 9 notice.text('正在加载···'); 10 $.ajax({ 11 async : true, 12 type : 'post', 13 url

wap 往下拉自动加载更多数据

var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if($(document).height() <= totalheight){ if(stop==true){ stop=false; $.post("http://www.lovexm.com/test.php", {start

Android打造(ListView、GridView等)通用的下拉刷新、上拉自动加载的组件

前言 下拉刷新组件在开发中使用率是非常高的,基本上联网的APP都会采用这种方式.对于开发效率而言,使用获得大家认可的开源库必然是效率最高的,但是不重复发明轮子的前提是你得自己知道轮子是怎么发明出来的,并且自己能够实现这些功能.否则只是知道其原理,并没有去实践那也就是纸上谈兵了.做程序猿,动手做才会遇到真正的问题,否则就只是自以为是的认为自己懂了.今天这篇文章就是以自己重复发明轮子这个出发点而来的,通过实现经典.使用率较高的组件来提高自己的认识.下面我们就一起来学习吧. 整体布局结构      

ListView下拉刷新,上拉自动加载更多

下拉刷新,Android中非常普遍的功能.为了方便便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能.设计最初是参考开源中国的Android客户端源码.先看示例图.          图1                                                                                                             图2          图3                      

SwipeRefreshLayout+RecyclerView实现下拉刷新上拉自动加载

在实际开发中,为了节省开发周期,下拉刷新上拉加载通常都会采取使用一些第三方库,典型的就是用PullToRefresh,XListView等等,还有就是谷歌推荐的SwipeRefreshLayout,可惜没有上拉加载功能,需要自己去实现一个上拉加载的脚View,再加上现在代替ListView的RecyclerView+CardView使用的频率也是也来也高,不得不说,CardView效果确实很好看,一个一个的小卡片,用户体验好,I like it!!!废话不说了,奔主题!今天也玩了一下SwipeR

Android UI--自定义ListView(实现下拉刷新+加载更多)

http://blog.csdn.net/wwj_748/article/details/12512885 Android UI--自定义ListView(实现下拉刷新+加载更多) 关于实现ListView下拉刷新和加载更多的实现,我想网上一搜就一堆.不过我就没发现比较实用的,要不就是实现起来太复杂,要不就是不健全的.因为小巫近期要开发新浪微博客户端,需要实现ListView的下拉刷新,所以就想把这个UI整合到项目当中去,这里只是一个demo,可以根据项目的需要进行修改. 就不要太在乎界面了哈:

Android智能下拉刷新加载框架—看这些就够了

一些值得学习的几个下拉刷新上拉加载开源库 Android智能下拉刷新框架-SmartRefreshLayout 支持所有的 View(AbsListView.RecyclerView.WebView....View) 和多层嵌套的视图结构 支持自定义并且已经集成了很多炫酷的 Header 和 Footer (图). 支持和ListView的同步滚动 和 RecyclerView.AppBarLayout.CoordinatorLayout 的嵌套滚动 NestedScrolling. 支持在An

Android Demo 下拉刷新+加载更多+滑动删除

小伙伴们在逛淘宝或者是各种app上,都可以看到这样的功能,下拉刷新和加载更多以及滑动删除,刷新,指刷洗之后使之变新,比喻突破旧的而创造出新的,比如在手机上浏览新闻的时候,使用下拉刷新的功能,我们可以第一时间掌握最新消息,加载更多是什么nie,简单来说就是在网页上逛淘宝的时候,我们可以点击下一页来满足我们更多的需求,但是在手机端就不一样了,没有上下页,怎么办nie,方法总比困难多,细心的小伙伴可能会发现,在手机端中,有加载更多来满足我们的要求,其实加载更多也是分页的一种体现.小伙伴在使用手机版QQ