jquery-weui + thinkphp 上拉加载

9 篇文章 0 订阅
7 篇文章 0 订阅

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');
    }
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值