2015-01-15 【PHP】手机Web网页的滚动加载

这个东西是半年之前做的了，当时在外地出差做了一个11区的团购网站。

移动端Web网页要做一个滚动加载的效果。

有幸我写的这段代码都保存了下来。

以下。

active.phtml

<?php echo $this->partial("_common/header_sp.phtml", array(
        'css' => array('/_sp/common/sampling.css'),
        'js' => array('/_sp/common/jquery-1.11.1.min.js')
        )) ?>

<form>
<div class="sampling_list">
    <ul>
    <div id="project_n" >
        <?php for ($i = 0; $i < 15; $i++): ?>
        <?php $project = $this->projects[$i]?>
                <li>
                    <a href="/sp/project/<?php echo $this->escape($project->name); ?>/">
                        ......
                    </a>
                </li>
        <?php endfor;?>
    </div>
    <div id="loading-wait">
        <li><img src="/resource/common/loading.gif" width="100" height="100" alt=""></li>
    </div>
    </ul>
</div>
<div class="nodata"></div> 
</form>
<script type="text/javascript">
$(function() {
    var winH = $(window).height(); //页面可视区域高度 
    var i = 1; //设置当前页数 
    var flg = 1; 
    $(window).scroll(function () {
        $('#loading-wait').show();
        if(flg == 1) {
            var pageH = $(document.body).height(); 
            var scrollT = $(window).scrollTop(); //滚动条top 
            var aa = (pageH-winH-scrollT)/winH; 
            if (aa < 0.002) {
                flg = 2;
                $.getJSON("/scroll-load/next/page/" + i, function(json){
                    flg = 1;
                    if(json){
                        var strHtml = "";
                        $.each(json, function(index, array) {
                            if (array['caption'] != null) {
                                var strHtml = "<li>";
                                strHtml += "<a href=\"\">";
                                $("#project_n").append(strHtml); 
                            }
                        });
                        i++;
                    } else {
                        $(".nodata").show().html("别滚动了，已经到底了。。。"); 
                        return false; 
                    }
                });
                $('#loading-wait').hide();
            }
        }
    });
});
</script>

ScrollLoadController.php

<?php

class ScrollLoadController {

    public function indexAction() {
        $pjs = new Projects();
        $this->getView()->projects = $pjs->fetchAll($pjs->selectActive());
        $this->getResponse()->appendBody($this->getView()->render('ScrollLoad/active.phtml'));
    }

    public function nextAction() {
        $arr[] = array();
        $pjs = new Projects();
        $start = $this->getData()->page * 15;
        $select = ' SELECT id, name FROM table ORDER BY id DESC limit ' . $start . ' , 5';
        $st = AX_Registry::getMasterDb()->prepare($select);
        $st->execute();
        while ($row = $st->fetch()) $rtValue[] = $row;
        foreach ($rtValue as $project) { 
        $arr[] = array( 
                        'name' => $project['client_name']
                      );
        }
        echo Zend_Json::encode($arr);
        exit();
    }
}

代码中删掉了项目相关内容。