上拉刷新下拉加载

xiaoxiao2021-02-28  42

<%@ 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>
转载请注明原文地址: https://www.6miu.com/read-1950313.html

最新回复(0)