h5手机端下拉刷新效果

移动端下拉刷新效果

<li>
<span class="xbtj pa"></span>
<a href="#">
<img src="images/img/pro11.jpg" />
<div class="proinfo pa">
<h6>韩国伊思面膜</h6>
<p class="intro">牛奶般的肌肤</p>
<div class="price">￥99</div>
<div class="market">市场参考价：129</div>
</div>
</a>
</li>
<li>
<span class="xbtj pa"></span>
<a href="#">
<img src="images/img/pro11.jpg" />
<div class="proinfo pa">
<h6>韩国伊思面膜</h6>
<p class="intro">牛奶般的肌肤</p>
<div class="price">￥99</div>
<div class="market">市场参考价：129</div>
</div>
</a>
</li>
<div class="loadingbox none tc" id="loadingbox"><img src="images/jz.gif" /><p>数据加载中...</p></div>
<div class="loadingbox none tc" id="noelsebox"><p>暂无更多内容</p></div>

js脚本加载数据

<pre name="code" class="javascript"><script>var page_count = 1;$(window).scroll(function(){if($(document).scrollTop() >= $(document).height()-$(window).height()-20) {$.ajax({type: "GET",url: "goods.php",data: {act:"goods_page",page_count:page_count},dataType: "json",success: function(res){var str = "";for (i in res) {str += '<li>'+'<span class="xbtj pa"></span>'+'<a href="goods.php?id='+ res[i].goods_id +'">'+'<span class="pro_img"><img src=./../' + res[i].goods_thumb + '></span>'+'<div class="proinfo pa">'+'<h6>'+res[i].small_name+'</h6>'+// '<p class="intro">'+"牛奶般的肌肤"+'</p>'+'<div class="price">'+"￥"+res[i].shop_price+'</div>'+'<div class="market">'+"市场参考价：129"+'</div>'+'</div>'+'</a>'+'</li>';}page_count++;if(str == ""){$('#noelsebox').show();$('#loadingbox').hide();}else{$('#loadingbox').show();$(str).insertBefore('#loadingbox');}}});}})jQuery(document).ready(function($) {$("#submit").click(function() {if($("#search_word").val()){$("#searchForm").submit();} else {alert("请输入关键词！");return false;}});});</script>