js实现上拉加载更多

先贴代码:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的优惠券title>
	<script src="themesmobile/mo_paleng_moban/js/one.js">script>
	<link rel="stylesheet" href="themesmobile/mo_paleng_moban/css/commen.css">
	<link rel="stylesheet" href="themesmobile/mo_paleng_moban/css/myCoupon.css">
	<style>
		.loading {
    		margin-bottom: 40px;
    		background: #f2f2f2;
    		height: 25px;
    		overflow: hidden;
    		justify-content: center;
    		/*padding-bottom: 75px;*/
    		display: none;
    		text-align: center;
		}		
		.loading img{
			width: 15px;
			height: 15px;
		}
	style>
head>
<body>
	<header>
		<img src="themesmobile/mo_paleng_moban/images/couponImg/back.png" alt="">
		历史记录
		<a href="user_coupon.php?act=myCoupon" class="toOther">我的卡券a>
	header>
	<div class="tip">div>
	<ul>
		
	ul>

	
	<div class="loading">
        <span>加载中...span>
        <img src="http://www.youtasc.com/shops/resources/images_my/load.gif">
    div>


	<script src="themesmobile/mo_paleng_moban/js/jquery.min.js">script>
	<script>
		var page=1; //定义页数
		var onoff=true; //控制loading开关

		$(document).ready(function(){
			$('body').css('display','none');
			$('body').fadeIn(800);
		})
		$('header img').on('click',function(){
			history.go(-1);
		});
		
		//isFirst参数  
		//在调用该方法的时候要做一个判断 
		//如果是首次加载数据 在没有数据的情况下提示没有数据
		//如果是在上拉加载中获取数据  在没有数据的情况下提示“这是我的底线”
		function getDate(isFirst=0){ 
			$.ajax({
			url:'user_coupon.php?act=my_coupon_history',
			type:'post',
			dataType:'json',
			data:{
				"page":page
			},
			success:function(res){
				console.log(res);
				// 无数据
				if(res.status==201){
					if(isFirst==1){
						// 首次加载无数据
   						onoff=false;  //当没有数据的时候,加载状态要关闭
   						$('.loading').hide();
   						$('.tip').html('

您还没有历史记录

'
); }else{ // 下拉加载无数据 onoff=false; //当没有数据的时候,加载状态要关闭 $('.loading').html("这是我的底线"); } }else{ // 有数据 $('.loading').html('加载中...'); var str=''; $.each(res.data.result,function(i,k){ str+='
  • + (k.status==2?"themesmobile/mo_paleng_moban/images/couponImg/used.png":"themesmobile/mo_paleng_moban/images/couponImg/overdue.png") +') no-repeat center;">'; str+='
    '; str+='

    '+k.coupon_name+'

    '
    ; str+='

    '+k.amount+' '+k.end_time+'到期

    '
    ; str+='
  • '
    }) //有数据的时候要做判断 //如果当前是第一页,则把容器中的内容即为请求数据 //如果当前不是第一页,则容器内容为本次请求数据和之前请求数据的拼接,所以这里用appendTo追加 if(page==1){ $('ul').html(str); }else{ $(str).appendTo($('ul')); } onoff=true; //当有数据的时候,上拉加载更多的状态为true } } }); } //当页面加载的时候要请求数据,此时为第一次请求,请求参数为1 getDate(1); //上拉加载更多 $(document).scroll(function() { if($(window).height()+$(document).scrollTop()>=$(document.body).height()){ $(".loading").show() if (onoff) { onoff=false setTimeout(function(){ page++ getDate(); //上拉加载更多请求数据,不是第一次请求数据,不需要传参,采用默认参数 },500) } } })
    script> body> html>

    onoff相当于一个开关锁。
    当onoff=false的时候,即没有数据的时候,关锁,禁止上拉加载更多。
    当onoff=true的时候,即 有数据的时候,开锁,允许上拉加载更多。

    你可能感兴趣的:(js)