```
<!-- 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();
}
?>
```
