主要是从http://jqweui.com/ 学习到的一款插件
主要是向下滑动的时候,从后台读取数据,而且读剩下的数据,奇思妙想 想到了一招。
<ul class="list_ul">
<volist name="info" id="v">
<li attr="<{$v.id}>">
<a href="<{:U('Company/thunder',array('id'=>$v['id']))}>" style="">
<figure>
<div>
<php>$images = string2array($v['image']);</php>
<img src="<{$images[0]}>">
</div>
<figcaption>
<{$v['title']}>
</figcaption>
</figure>
</a>
</li>
</volist>
</ul>
使用的thinkphp3.2框架,
主要就是对待每个li标签增加一个attr属性,是图片的id
$(function(){
$(document.body).infinite(100);
var loading = false; //状态标记
$(document.body).infinite().on("infinite", function() {
if(loading) return;
loading = true;
//获得最后一个li的id
setTimeout(function() {
var id = $('ul.list_ul li:last').attr('attr');
$.ajax({
type:'post',
url:'<{:U("company/style")}>',
data:{'p':1,'id':id},
success:function(msg){
msg = JSON.parse(msg)
var str = " ";
console.log(typeof msg) //object
$.each(msg,function(i,n){
console.log(typeof n.image) //字符串
str += '<li attr="'+n.id+'"> <a href="<{:U("Company/thunder",array("id"=>'+n.id+'))}>" style=""> <figure> <div> <php>$images = string2array('+n.image+');</php> <img src="'+n.image.slice(14,37)+'"> </div> <figcaption> '+n.title+' </figcaption> </figure> </a> </li>'
})
$(".list_ul").append(str);
}
})
loading = false;
}, 1500); //模拟延迟
});
});
先调用插件里面的代码,主要是在回调函数那里使用ajax 把ul下的最后一个li的id值传递给服务端,服务端通过那个最后id进行where查询大于这个id并且取出10条。
if (IS_AJAX) {
$id = I('post.id');
$getInfo = M('CompanyThunder')->order('id')->where(array('id'=>array('gt',$id)))->limit(0,10)->select();
echo json_encode($getInfo);
}
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script> 引用的插件地址,