javascript代码段
<script src="__JS__/jquery/jquery-1.9.1.min.js?version={$version}"></script>
<script src="__PUBLIC__/Js/jquery-weui.min.js"></script>
<script src="__JS__/jquerySession.js"></script>
<script src="__JS__/underscore/underscore.js"></script>
方法定义:
<!--上拉刷新-->
<script>
var loading = false; //状态标记
//接收的页码值
var page = ("{:I('page')}" >= 1) ? "{:I('page')}" : 1;
$(document.body).infinite().on("infinite", function () {
if (loading) return;
loading = true;
page++;
setTimeout(function () {
//向服务器异步获取数据
require_scenic_data();
//设置变量
loading = false;
}, 500); //模拟延迟
});
$(function () {
//禁用原始分页HTML代码
$('.home_main .page').hide()
})
function require_scenic_data() {
var type = $('#sort_type').val();
$.ajax({
//请求的路由地址
url: "{:U('Mobile/MobileIndex/all_member_list')}",
//发送页码和附加条件
data: "page="+page+"&type=" + type,
method: "post",
dataType: "json",
success: function (collection) {
var html = _.template($('#list').html(), {variable: 'datas'})(collection)
if(page > 1){
$("#home_cont").append(html);
}else{
$("#home_cont").html(html);
}
}
});
}
function change_page_size(number){
page = number;
}
</script>
触发条件
$('body').on('click',".clickSort3",function(){
var _this = $(this);
var num = $.session.get('dbnum');//读取session1
var nums= num*1+1;//2
$.session.set('dbnum', nums);
if(nums % 2 == 0){
$('#sort_type').val(2);
require_scenic_data();
}else{
$('#sort_type').val(22);
require_scenic_data();
}
})
understore模板
<script type="text/template" id="list">
<% _.each(datas,function(item){%>
<li class="clearfix infoline addNum">
<img src="__ROOT__<%= item.photo_url %>" class="fl"/>
<div class="cont_info fl">
<h6><%= item.company %></h6>
<dl>
<dd class="clearfix">
<span class="fl">姓名:</span>
<p class="fl"><%= item.realname %></p>
</dd>
<dd class="clearfix">
<span class="fl">职位:</span>
<p class="fl"><%= item.job %></p>
</dd>
<dd class="clearfix">
<span class="fl">区域:</span>
<p class="fl"><%= item.area_string %></p>
</dd>
<dd class="clearfix">
<span class="fl">行业:</span>
<p class="fl"><%= item.field_string %></p>
</dd>
</dl>
</div>
</li>
<%})%>
</script>
PHP后台:分页规则根据不同的版本切换即可
<?php
class MobileIndexAction extends FrontAction {
public function all_member_list()
{
$user_obj = new UserModel();
//获取会员等级信息
$user_id = $_SESSION['user_id'];
//type 是自己传来的条件,可省略。
//page 是jquery传来的页码数,必须。
$type = empty(I('type')) ? 0 : I('type');
$page = empty(I('page')) ? 0 : I('page');
switch ($type)
{
case 0:
$order = 'user_id desc';
break;
case 10:
$order = 'user_id asc';
break;
case 1:
$order = 'invite_num desc';
break;
case 11:
$order = 'invite_num asc';
break;
case 2:
$order = 'see_num desc';
break;
case 22:
$order = 'see_num asc';
break;
}
$where = 'is_vip != 2 AND is_vip != 0';
import('ORG.Util.Page'); // 导入分页类
$count = $user_obj->where($where)->count();
$Page = new Page($count,10); // 实例化分页类 传入总记录数和每页显示的记录数
//请求的数据是传来的页码数向后数十条
$user_list = $user_obj->where($where)->order($order)->limit($page*10,10)->select();
//如果是ajax请求则返回json数据格式
if(IS_AJAX){
echo json_encode($user_list);
exit();
}
$this->assign('user_list',$user_list);
$this->assign('page', $Page->show());
$this->display('rests');
}