H5页面实现上拉加载更多

问题描述:

微信公众号开发中,文章列表需要实现与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">

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');
        }
    }

你可能感兴趣的:(【语言】,----------PHP)