H5页面实现上拉加载更多

最新推荐文章于 2024-08-22 15:47:42 发布

exponent

最新推荐文章于 2024-08-22 15:47:42 发布

阅读量8.5k

点赞数

分类专栏：【语言】 ----------PHP 文章标签： thinkphp php javascript 微信开发

本文链接：https://blog.csdn.net/xcqingfeng/article/details/72677111

版权

【语言】同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

----------PHP

23 篇文章 0 订阅

订阅专栏

问题描述：

微信公众号开发中，文章列表需要实现与app端相同的上拉加载更多的功能。这里使用的PHP框架为ThinkPHP。

解决方式

H5页面——首页(显示页)：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<!--作为文章列表的容器-->
<div class="wz-box">
<!----包含文章列表内容>
<include file="wz/list_row"/>
</div>
</body>
<script src="__H5__/ws/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
    var num = 1;
    var scollif = true;
    $(document).ready(function(){
        var range = 20;             //距下边界长度/单位px
        var elemt = 280;            //插入元素高度/单位px
        var maxnum = 1000;          //设置加载最多次数
        var totalheight = 0;
        var main = $(".wz-box");       //主体元素
        $(window).scroll(function(){
            //滚动条距顶部距离(页面超出窗口的高度)
            var srollPos = $(window).scrollTop();    
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
            //判断上拉的高度以决定是否加载更多
            if(($(document).height()-range) <= totalheight  && num != maxnum) {
                if(scollif){
                    console.log(11)
                    loadMore();
                }else {
                    console.log(2)
                }
            }
        });
    });

    //加载更多:ajax请求，获取文章列表
    function loadMore() {
        scrollif = false;
        $.getJSON('__CONTROLLER__/articleList',{page: ++num},function (result){
        //ajax请求完成后，将list_row页面append到list页面的最后
             if(result.data.html){
                 $(".zk-box").append(result.data.html);
             }
        });
    }
</script>
</html>

H5页面——文章列表内容页

<volist name="list" id="v">
<div class="wrap">
   <div class='title'>{$v.title}</div>
   <div class="img"><img src="{$v.img}" /></div>
   <!--....其他文章列表内容-->
</div>
</volist>

服务器端：

public function articleList(){
        if (!$page = I('get.page')) {
            $page = 1;
        }
    /*查询文章，分页并组装数据*/
    //code....
    //这里假设每页10篇文章
    /******************************/
    //将查询所得数据分配至模版
        $this->assign('list', $list->result);
        if (IS_AJAX) {
        //ajax请求文章数据，分配到list_row页面
        //请求完成后，使用js将list_row页面加载至list页面的最后
            $content = $this->fetch('list_row');
            return $this->json(1, '', ['html' => $content]);
        } else {
        //第一次进入首页时，并没有ajax请求，此时直接显示list页面
        //进入首页后，其文章列表内容为空，ajax开始请求
            return $this->display('list');
        }
    }