背景:
最近在手机端开发功能显示列表数据时发现,如果数据过多,造成图片加载延迟,不适合即时的效果呈现,既影响用户体验,又显得没有技术含量!通过自己测试,可以提供下面的一种方式,个人使用的是PHP开发,可以借鉴优化。
实现步骤:
1.Controller控制器
//村小农列表
public function cunXiaoNongList(){
$size = 10;
$ticketId = 2;
$page = 0;
$condition = ' and tu.user_id='.$this->uid.' and tu.nong_id='.$ticketId;
$number=$this->nongModel->getNongCount($condition);
$nongList=$this->nongModel->getNongList($condition,$page,$size);
$this->assign('nongList',$ticketList);
$this->assign('total',$number);
$this->display('Nong/nongList');
}
//村小农分页加载-ajax
public function ajaxCunXiaoNongList(){
$size = 10;
$nongId = 2;
$page = I('post.page');
$condition = ' and tu.user_id='.$this->uid.' and tu.nong_id='.$nongId;
$number=$this->nongModel->getNongCount($condition);
$start=$page*$size;
$nongList=$this->nongModel->getNongListAjax($condition,$start,$size);
$this->assign('nongList',$nongList);
$this->assign('total',$number);
$this->display('Nong/ajaxNongList');
}
2.Model模型层
//获取兑换码列表
public function getNongList($condition,$start,$size){
if (!$condition) {
return false;
}else{
return $this->dbNongUse->table('nong_use tu,nong t')->where(' tu.nong_id = t.nong_id'.$condition)->field($field)->limit($start, $size)->select();
}
}
//关联两个表满足的数据
public function getNongCount($condition){
if (!$condition) {
return false;
}else{
return $this->dbNongUse->table('nong_use tu,nong t')->where(' tu.nong_id = t.nong_id'.$condition)->count();
}
}
//获取兑换码列表——ajax
public function getNongListAjax($condition,$start,$size){
if (!$condition) {
return false;
}else{
return $this->dbNongUse->table('nong_use tu,ticket t')->where(' tu.nong_id = t.nong_id'.$condition)->field($field)->limit($start, $size)->select();
}
}
3.View视图层
nongList.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>村小农网</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="format-detection" content="telephone=no" />
<meta content="email=no" name="format-detection" />
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<meta name="apple-mobile-web-app-title" content="">
<link rel="stylesheet" href="__VIEW__Ticket/css/reset.css"/>
<link rel="stylesheet" href="__VIEW__Ticket/css/movie_ticket.css"/>
<style>
html,body{overflow-x: hidden;overflow-y: auto;margin-bottom: 0.4rem;}
img{ pointer-events: none;}
.alert{padding: 8px 20px;box-sizing: border-box;background: rgba(0,0,0,.5);color: #fff;text-align: center;border-radius: 4px;top:40%;left:50%;position: fixed;transform: translate(-50%,0);font-size: 16px;display: none;z-index: 99;}
.jiazai p{height: 0.24rem;font-size: 0.24rem;color: #ccc;text-align: center;margin: 0.3rem 0;position: fixed;bottom: 0;left: 0;width: 100%;display: none;}
</style>
</head>
<script>
var html = document.documentElement;
var whtml =html.getBoundingClientRect().width;
html.style.fontSize = whtml /7.5 + "px";
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
</script>
<body>
<if condition="empty($nongList) neq true">
<input type="hidden" class="total_num" value="{$total}">
<volist name="ticketList" id="vo">
<div class="movie_unused">
<div class="movie_left"><span><if condition="$vo['use_status'] eq 1">未使用<elseif condition="$vo['use_status'] eq 2" />已使用<elseif condition="$vo['use_status'] eq 3" />已过期</if></span></div>
<div class="movie_right">
<p class="number">村小农:{$vo['nong_code']}</p>
<p class="data">村小农:{$vo['exnong_code']}</p>
<p class="data">兑换时间:{$vo['user_receive_time']|date="Y-m-d H:i:s",###}</p>
<p class="data">有效时间:{$vo['use_start_time'|date="Y-m-d",###]} ~ {$vo['use_end_time'|date="Y-m-d",###]}</p>
</div>
</div>
</volist>
<else />
<div style="margin-top: 2.7rem;text-align: center;">
<img style="width: 3.68rem;display: inline-block;" src="__VIEW__Ticket/images/movie_mine_img_empty.png" alt=""/>
<p style="color: #FFC3C0;font-size: 0.28rem;margin-top: 0.57rem;text-align: center">暂无兑换记录</p>
</div>
</if>
<p class="alert">领取成功</p>
<div class="jiazai">
<p>正在加载中...</p>
</div>
<script src="__VIEW__Ticket/js/jQuery.v1.8.3.min.js"></script>
<script type="text/javascript">
<!--分页加载JS提取,下面详解-->
$(function(){
var page = 0;
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var windowHeight = $(this).height(); //当前可视的页面高度
if(scrollTop + windowHeight >= scrollHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
$('.jiazai p').css('display','block');
var total = $('.total_num').val();
page++;
$nums = page*10;
if(total > $nums){
$.ajax({
type:'POST',
data:{page:page},
url:'__APP__/Nong/ajaxNongList',
dataType:'html',
success:function(data){
$('body').append(data);
$('.jiazai p').css('display','none');
}
})
}else{
$('.jiazai p').css('display','none');
}
}else{
$('.jiazai p').css('display','none');
}
})
})
</script>
</body>
</html>
ajaxNongList.html(下拉加载的ajax页面)
<if condition="empty($nongList) neq true">
<input type="hidden" class="total_num" value="{$total}">
<volist name="nongList" id="vo">
<div class="movie_unused">
<div class="movie_left"><span><if condition="$vo['use_status'] eq 1">未使用<elseif condition="$vo['use_status'] eq 2" />已使用<elseif condition="$vo['use_status'] eq 3" />已过期</if></span></div>
<div class="movie_right">
<p class="number">村小农:{$vo['nong_code']}</p>
<p class="data">村小农:{$vo['exnong_code']}</p>
<p class="data">兑换时间:{$vo['user_receive_time']|date="Y-m-d H:i:s",###}</p>
<p class="data">有效时间:{$vo['use_start_time'|date="Y-m-d",###]} ~ {$vo['use_end_time'|date="Y-m-d",###]}</p>
</div>
</div>
</volist>
<else />
<div style="margin-top: 2.7rem;text-align: center;">
<img style="width: 3.68rem;display: inline-block;" src="__VIEW__Ticket/images/movie_mine_img_empty.png" alt=""/>
<p style="color: #FFC3C0;font-size: 0.28rem;margin-top: 0.57rem;text-align: center">暂无兑换记录</p>
</div>
</if>
4.JavaScript实现下拉加载更多
<script src="__VIEW__Ticket/js/jQuery.v1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var page = 0;
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var windowHeight = $(this).height(); //当前可视的页面高度
if(scrollTop + windowHeight >= scrollHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
$('.jiazai p').css('display','block');
var total = $('.total_num').val();
page++;
$nums = page*10;
if(total > $nums){
$.ajax({
type:'POST',
data:{page:page},
url:'__APP__/Nong/ajaxNongList',
dataType:'html',
success:function(data){
$('body').append(data);
$('.jiazai p').css('display','none');
}
})
}else{
$('.jiazai p').css('display','none');
}
}else{
$('.jiazai p').css('display','none');
}
})
})
</script>
最后, 希望以上内容对大家有用,欢迎关注!