h5手机端下拉刷新效果

最新推荐文章于 2024-09-17 01:46:56 发布

wanjian119

最新推荐文章于 2024-09-17 01:46:56 发布

阅读量6.7k

点赞数 1

分类专栏： js 文章标签： js 布局下拉刷新

本文链接：https://blog.csdn.net/wanjian119/article/details/50062009

版权

js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

移动端下拉刷新效果

html页面布局和效果

		<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>