```
<!-- html部分,將數據加載到ul內的li標簽中 -->
<!DOCTYPE html>
<html>
<head>
<title><h6>手機端上拉加載數據</h6></title>
</head>
<body>
<div>
<ul id="container">
</ul>
</div>
</body>
</html>
```
```
<script type="text/javascript">
//上拉的時候觸發后端數據請求并加載到html
$(function() {
var totalHeight = 0; //定義一個總高度變量
var page = 1;//定義一個默認頁面
function ata() { //loa動態加載數據
totalHeight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); //瀏覽器的高度加上滾動條的高度
if($(document).height() <= totalHeight) {
page = page+1;//每次加載+1(相當于分頁當前頁+1)
order_type = "<?php echo isset($_GET['order_type'])?$_GET['order_type']:'index' ?>";//條件數據
keyword = "<?php echo isset($_GET['keyword'])?$_GET['keyword']:'' ?>";//條件數據
var data = {
var url = <?=site_url('index/inedx')?>//請求地址
var data= {
'per_page' : page,
'order_type': order_type,
'keyword' : keyword
};
$.ajax({
url : url,
data: data,
type: 'post',
dataType: 'json',
success : function(resData){//返回的數據
$.each(resData.data, function(key, val){//存在多條數據循環加載
var html = '';
html += '<li>';
html += '<h1>'+val.id+'</h1>';
html += '<h6>'+val.title+'</h6>';
html += '</li>';
$("#container").append("<p>我是新加載出來的數據</p >"); //加載數據
})
}
})
//當文檔的高度小于或者等于總的高度時，開始動態加載數據
//$("#container").append("<p>我是新加載出來的數據</p >"); //加載數據
}
}
$(window).scroll(function() {
// console.log("滾動條到頂部的垂直高度：" + $(window).scrollTop());
// console.log("頁面的文檔高度：" + $(document).height());
// console.log("瀏覽器的高度：" + $(window).height());
ata();
})
})
</script>
```
```
<?php
// 后端數據接收與返回
public function index_ajax()
{
$order_type = $this->input->post('order_type');//訂單類型
$keyword = $this->input->post('keyword');//關鍵字
$page = $this->input->post('per_page')?$this->input->post('per_page'):1; //當前頁
$user_id = $this->session->user_id;//用戶id
$page_num = 10;//每次加載條數
$res = $this->zt->class_order->get_orderlist_home($user_id, $order_status, $keyword, $page, $page_num);//獲取數據
echo json_encode($data);
exit();
}
?>
```
