PHP和AJAX实现下拉无刷新，分页加载更多功能！

其他 2018-08-18 23:49:52 阅读次数: 0

背景：

最近在手机端开发功能显示列表数据时发现，如果数据过多，造成图片加载延迟，不适合即时的效果呈现，既影响用户体验，又显得没有技术含量！通过自己测试，可以提供下面的一种方式，个人使用的是PHP开发，可以借鉴优化。

实现步骤：

1.Controller控制器

    //村小农列表
    public function cunXiaoNongList(){
        $size = 10;
        $ticketId = 2;
        $page = 0;
        $condition = ' and tu.user_id='.$this->uid.' and tu.nong_id='.$ticketId;
        $number=$this->nongModel->getNongCount($condition);
        $nongList=$this->nongModel->getNongList($condition,$page,$size);
        $this->assign('nongList',$ticketList);
        $this->assign('total',$number);
        $this->display('Nong/nongList');
    }
    //村小农分页加载-ajax
    public function ajaxCunXiaoNongList(){
        $size = 10;
        $nongId = 2;
        $page = I('post.page');
        $condition = ' and tu.user_id='.$this->uid.' and tu.nong_id='.$nongId;
        $number=$this->nongModel->getNongCount($condition);
        $start=$page*$size;
        $nongList=$this->nongModel->getNongListAjax($condition,$start,$size);
        $this->assign('nongList',$nongList);
        $this->assign('total',$number);
        $this->display('Nong/ajaxNongList');
    }

2.Model模型层

//获取兑换码列表
	public function getNongList($condition,$start,$size){
		if (!$condition) {
			return false;
		}else{
			return $this->dbNongUse->table('nong_use tu,nong t')->where(' tu.nong_id = t.nong_id'.$condition)->field($field)->limit($start, $size)->select();
		}
	}
	//关联两个表满足的数据
	public function getNongCount($condition){
		if (!$condition) {
			return false;
		}else{
			return $this->dbNongUse->table('nong_use tu,nong t')->where(' tu.nong_id = t.nong_id'.$condition)->count();
		}
	}
	//获取兑换码列表——ajax
	public function getNongListAjax($condition,$start,$size){
		if (!$condition) {
			return false;
		}else{
			return $this->dbNongUse->table('nong_use tu,ticket t')->where(' tu.nong_id = t.nong_id'.$condition)->field($field)->limit($start, $size)->select();
		}
	}

3.View视图层 

nongList.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>村小农网</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="email=no" name="format-detection" />
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <meta name="apple-mobile-web-app-title" content="">
    <link rel="stylesheet" href="__VIEW__Ticket/css/reset.css"/>
    <link rel="stylesheet" href="__VIEW__Ticket/css/movie_ticket.css"/>
    <style>
         html,body{overflow-x: hidden;overflow-y: auto;margin-bottom: 0.4rem;} 
        img{  pointer-events: none;}
        .alert{padding: 8px 20px;box-sizing: border-box;background: rgba(0,0,0,.5);color: #fff;text-align: center;border-radius: 4px;top:40%;left:50%;position: fixed;transform: translate(-50%,0);font-size: 16px;display: none;z-index: 99;}
        .jiazai p{height: 0.24rem;font-size: 0.24rem;color: #ccc;text-align: center;margin: 0.3rem 0;position: fixed;bottom: 0;left: 0;width: 100%;display: none;}

    </style>
</head>
<script>
    var html = document.documentElement;
    var whtml  =html.getBoundingClientRect().width;
    html.style.fontSize = whtml /7.5 + "px";
    window.addEventListener("popstate", function(e) {
        alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
    }, false);
</script>
<body>
    <if  condition="empty($nongList) neq true">
    <input type="hidden" class="total_num" value="{$total}">
    <volist name="ticketList" id="vo">
    <div class="movie_unused">
        <div class="movie_left"><span><if condition="$vo['use_status'] eq  1">未使用<elseif condition="$vo['use_status'] eq 2" />已使用<elseif condition="$vo['use_status'] eq 3" />已过期</if></span></div>
        <div class="movie_right">
            <p class="number">村小农：{$vo['nong_code']}</p>
            <p class="data">村小农：{$vo['exnong_code']}</p>
            <p class="data">兑换时间：{$vo['user_receive_time']|date="Y-m-d H:i:s",###}</p>
            <p class="data">有效时间：{$vo['use_start_time'|date="Y-m-d",###]} ~ {$vo['use_end_time'|date="Y-m-d",###]}</p>
        </div>
    </div>
    </volist>
    <else /> 
    <div style="margin-top: 2.7rem;text-align: center;">
        <img style="width: 3.68rem;display: inline-block;" src="__VIEW__Ticket/images/movie_mine_img_empty.png" alt=""/>
        <p style="color: #FFC3C0;font-size: 0.28rem;margin-top: 0.57rem;text-align: center">暂无兑换记录</p>
    </div>
    </if>
    <p class="alert">领取成功</p>
    <div class="jiazai">
        <p>正在加载中...</p>
    </div>
    <script src="__VIEW__Ticket/js/jQuery.v1.8.3.min.js"></script>
    <script type="text/javascript">
      <!--分页加载JS提取，下面详解-->
      $(function(){
        var page = 0;
        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();               //滚动条距离顶部的高度
            var scrollHeight = $(document).height();           //当前页面的总高度
            var windowHeight = $(this).height();               //当前可视的页面高度
            if(scrollTop + windowHeight >= scrollHeight)  { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
                $('.jiazai p').css('display','block');
                var total = $('.total_num').val();
                page++;
                $nums = page*10;
                if(total > $nums){
                       $.ajax({
                       type:'POST',
                       data:{page:page},
                       url:'__APP__/Nong/ajaxNongList',
                       dataType:'html',
                       success:function(data){
                           $('body').append(data);
                           $('.jiazai p').css('display','none');
                       }
                    })
                }else{
                    $('.jiazai p').css('display','none');
                }
                
            }else{
                $('.jiazai p').css('display','none');
            }

        })

    })
    </script>
</body>

</html>


ajaxNongList.html(下拉加载的ajax页面)

<if  condition="empty($nongList) neq true">
<input type="hidden" class="total_num" value="{$total}">
<volist name="nongList" id="vo">
<div class="movie_unused">
    <div class="movie_left"><span><if condition="$vo['use_status'] eq  1">未使用<elseif condition="$vo['use_status'] eq 2" />已使用<elseif condition="$vo['use_status'] eq 3" />已过期</if></span></div>
    <div class="movie_right">
        <p class="number">村小农：{$vo['nong_code']}</p>
            <p class="data">村小农：{$vo['exnong_code']}</p>
            <p class="data">兑换时间：{$vo['user_receive_time']|date="Y-m-d H:i:s",###}</p>
            <p class="data">有效时间：{$vo['use_start_time'|date="Y-m-d",###]} ~ {$vo['use_end_time'|date="Y-m-d",###]}</p>
    </div>
</div>
</volist>
<else /> 
<div style="margin-top: 2.7rem;text-align: center;">
    <img style="width: 3.68rem;display: inline-block;" src="__VIEW__Ticket/images/movie_mine_img_empty.png" alt=""/>
    <p style="color: #FFC3C0;font-size: 0.28rem;margin-top: 0.57rem;text-align: center">暂无兑换记录</p>
</div>
</if>

4.JavaScript实现下拉加载更多

<script src="__VIEW__Ticket/js/jQuery.v1.8.3.min.js"></script>
    <script type="text/javascript">

      $(function(){
        var page = 0;
        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();               //滚动条距离顶部的高度
            var scrollHeight = $(document).height();           //当前页面的总高度
            var windowHeight = $(this).height();               //当前可视的页面高度
            if(scrollTop + windowHeight >= scrollHeight)  { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
                $('.jiazai p').css('display','block');
                var total = $('.total_num').val();
                page++;
                $nums = page*10;
                if(total > $nums){
                       $.ajax({
                       type:'POST',
                       data:{page:page},
                       url:'__APP__/Nong/ajaxNongList',
                       dataType:'html',
                       success:function(data){
                           $('body').append(data);
                           $('.jiazai p').css('display','none');
                       }
                    })
                }else{
                    $('.jiazai p').css('display','none');
                }
                
            }else{
                $('.jiazai p').css('display','none');
            }

        })

    })
   
  
    </script>

  最后， 希望以上内容对大家有用，欢迎关注！

猜你喜欢

转载自blog.csdn.net/Aaroun/article/details/81198909
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022