上拉刷新下拉加载

最新推荐文章于 2022-08-28 18:27:17 发布
houjx3
最新推荐文章于 2022-08-28 18:27:17 发布
阅读量136
点赞数
本文链接：https://blog.csdn.net/houjx3/article/details/78835330
版权
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'MyJsp.jsp' starting page</title>
    <link rel="stylesheet" href="/app/css/pullToRefresh.css"/>
    <script src="/app/js/iscroll.js"></script>
    <script src="/app/js/pullToRefresh.js"></script>
  </head>
  <body>
        <div id="wrapper">
          <ul>
            <li>row 10</li>
            <li>row 9</li>
            <li>row 8</li>
            <li>row 7</li>
            <li>row 6</li>
            <li>row 5</li>
            <li>row 4</li>
            <li>row 3</li>
            <li>row 2</li>
            <li>row 1</li>
          </ul>
        </div>
  </body>
  <script type="text/javascript">
  refresher.init({
        id:"wrapper",
        pullDownAction:Refresh,                                                            
        pullUpAction:Load                                                                             
        });    
        function Refresh() {       
            wrapper.refresh();/****remember to refresh after  action completed！ --example-yourId.refresh(); ----| ****/
        }
         
        function Load() {
        wrapper.refresh();/****remember to refresh after action completed！！！   -example--yourId.refresh(); --- ****/
        }
  </script>
</html>

实例：=========================================================================
<script type="text/javascript" charset="utf-8">

var funCurrentPage=1;
$(function(){
    refresher.init({
    id:"wrapper",
    pullDownAction:Refresh,                                                            
    pullUpAction:Load                                                                           
    });                                                  
    var generatedCount = 0;
    
    function Refresh(){
        funCurrentPage=1;
        getPrice(funCurrentPage,10)
        
        wrapper.refresh();
    
    }
                                                                                                                                                        
    function Load() {
        funCurrentPage=parseInt(funCurrentPage)+1;
        getPrice(funCurrentPage,10)
        wrapper.refresh();//刷新
    };
});
</script>
<div class="nav_list">
    
    <div id="wrapper">
          <ul>
            <li>row 10</li>
            <li>row 9</li>
            <li>row 8</li>
            <li>row 7</li>
            <li>row 6</li>
            <li>row 5</li>
            <li>row 4</li>
            <li>row 3</li>
            <li>row 2</li>
            <li>row 1</li>
          </ul>
        <ul class="nav_list_box" id="wrapper_main">
        </ul>    
    </div>
</div>
<SCRIPT type="text/javascript">
function getPrice(currentPage,pageSize){
    $.blockUI({ message: "正在加载，请稍候...",css: {
        border: 'none',
        padding: '15px',
        backgroundColor: '#000',
        '-webkit-border-radius': '10px',
        '-moz-border-radius': '10px',
        opacity: .5,
        color: '#fff'
    }});
    if(currentPage==1){
        $("#wrapper_main").empty();
    }
    var _url = "<%=request.getContextPath()%>/user/getDataFromURL.html";
    $.ajax({
          type: 'POST',
          url: _url,
          data: {"currentPage":currentPage,"pageSize":pageSize},
          dataType: "json",
          success: function(data){
            if (data.success==1){
                
                $.each(data.price.rows,function(index,value){
                    var time=value.data;
                    //var time1=time.toString().subString(0,10);
                    var li ='';
                    
                    li +='<li>';
                    li +='   <a class="price_box">';
                    li +='         <div class="price_box_rt">';
                    li +='            <h3 class="price_sort">【'+value.province+'】'+value.market+'<em>'+value.date+'</em></h3>';
                    li +='            <p class="in_01"><i>名称</i><span>现价（元/斤）</span><span>最高价（元/斤）</span><span>最低价（元/斤）</span></p>';
                    li +='            <p class="in_02"><i>'+value.productname+'</i><span>'+value.price+'元</span><span>'+value.maxprice+'元</span><span>'+value.minprice+'元</span></p>';
                    li +='        </div>';
                    li +='    </a>';
                    li +='</li>';

                    $("#wrapper_main").append(li);
                    });

            }
            jQuery.unblockUI();    
        }
    });
}
$(function(){
      getPrice(1,10);
})
</SCRIPT>