PHP+JS+HTML 手機下拉載入分頁
阿新 • • 發佈:2018-11-02
HTML迴圈頁面
can 檢視容器引數 dir 傳值(自定義)
<div class="fhsj"> <ul class="lbt" id="thelist" can="2" dir="<?= $_GET['dir'] ?>" > <?php foreach($data as $row){?> <a class="weui-cell weui-cell_access" href="#"> <div class="weui-cell__bd"><p><?= $row['title'] ?></p></div> <div class="weui-cell__ft"></div> </a> <?php }?> </ul> </div>
js頁面
<script src="js/jquery-weui.js"></script> <!-- 迴圈條數 --> <?php if(count($data)==15){?> <script src="js/dropload.min.js"></script> <script> $(function(){ var counter = 0; var num = 0; var pageStart = 0,pageEnd = 0; var isMore=true; // dropload if(isMore){ $('.fhsj').dropload({ scrollArea : window, loadDownFn : function(me){ if(isMore){ setTimeout(function () { var can = $('#thelist').attr('can'); var dir = $('#thelist').attr('dir'); $url = "PHP處理頁面&dir="+dir+"&page="+can; $.get($url,function(data){ $(".lbt").append(data); console.log(data); me.resetload(); if(data == "<div id='wsj' class='content'>沒有更多了!!</div>"){ isMore=false; $("#wsj").hide(); me.lock(); me.noData(); me.resetload(); } $(".isdelbtn").unbind(); }); $('#thelist').attr('can',parseInt(can)+1); }, 1000); }; } }); } }); </script> <?php }?>
PHP處理頁面
if($_GET['do'] == 'pagelist'){ //手機滑動翻頁 $page = max(1, getGP('page','G','int')); $pagesize = 15; $offset = ($page - 1) * $pagesize; $sql = "SELECT * FROM `news` ORDER BY id desc limit $offset,$pagesize"; $data = $db->fetch_all($sql); if(count($data)==0){ echo "<div id='wsj' class='content'>沒有更多了!!</div>"; exit(); } include 'pagelist.html'; }
HTML載入頁面
與迴圈頁面一致
<?php foreach($data as $row){?>
<a class="weui-cell weui-cell_access" href="#">
<div class="weui-cell__bd">
<p><?= $row['title'] ?></p>
</div>
<div class="weui-cell__ft"></div>
</a>
<?php }?>