Thinkphp 3.23 页面上拉加载基于ajax分页

最新推荐文章于 2021-08-06 22:20:43 发布

李振磊

最新推荐文章于 2021-08-06 22:20:43 发布

阅读量2k

点赞数 1

分类专栏： ThinkPHP 3.23 H5 文章标签： thinkphp ajax 分页 php

本文链接：https://blog.csdn.net/lzl18918615216/article/details/68925067

版权

ThinkPHP 3.23 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

效果如下

invite.html

<include file="Public:header" />
<body>
<header class="weui-navbar hd-bar">
    <a class="icon"></a>
    <ul class="navbar">
        <li class="weui-navbar__item weui-bar__item_on" data-id='0'>收到的邀请</li>
   <li class="weui-navbar__item" data-id='1'>发出的邀请</li>
    </ul>
</header>
<div class="contain top-contain">


<div class="contain-box contain-box1" id="toMeInvite">


</div>


<div class="contain-box" style="display: none" id="fromMeInvite">


</div>


  <div class="loading" style="text-align: center;"></div>
  
</div>
</body>
<include file="Public:footer" />
<script>
$(function(){
    var page = [0,0],
        pages = [0,0],
        type = 0;
    getdata(0,0);
    getdata(0,1);
    
    //获取总页数
    $.get("/Home/Message/invitePages", function(data){
        pages = data;
    });


    $('.weui-navbar__item').on('click',function(){
        type = $(this).data('id');
    })


    
    //获取指定页数的数据
    function getdata(page,type){
        $.get("/Home/Message/listHtml" , {page:page,type:type} , function(result){
                if(type == 0){
                    $("#toMeInvite").append(result);
                }else{
                     $("#fromMeInvite").append(result);
                }
        });
    }


    
    //上拉加载
    $(document).on('scroll', function(event){
        var st = $(this).scrollTop();
        var d=$(document).height()-$(window).height();
        var loading=$('.loading');
        var icon='<i class="weui-loading weui-icon_toast" style="margin-top: 5px;"></i>';
        if(st >= d){


            page[type]++;
            loading.css('display',"block");
            if(page[type] < pages[type]){
                loading.html(icon);
                getdata(page[type],type);
            }else{
                setTimeout(function () {
                    loading.html("暂无数据").slideUp(500);
                },2000)
            }
        }
    });
    
});

frommeinvite.html
<volist name="fromMeInvite" id="fromMe">
<div class="weui-cells">
 <div class="weui-cell">
      <a href="{:U('UserInfo/seniorinfo',array('uid'=>$fromMe['invite_user']['id']))}">
     <div class="weui-cell__hd cell__hd"><img src="{$fromMe.invite_user.headimgurl}" style="width: 50px;margin-right: 5px"/></div>
       </a>
       <div class="weui-cell__bd cell__bd">
           <p style="font-size: 0px;">
  <span class="user-basic" >{$fromMe.invite_user.nickname}</span>
           <if condition="$fromMe['invite_user']['vip'] eq 1">
                <icon class="sex-icon vip"></icon>
                <elseif condition="$fromMe['invite_user']['sex'] eq 0"/>
              </if>
            <if condition="$fromMe['invite_user']['sex'] eq 1">
                <span class="sex-icon sex-icon__by"></span>
                <elseif condition="$fromMe['invite_user']['sex'] eq 2"/>
                <span class="sex-icon sex-icon__gl"></span>
              </if>
           </p>
  <p style="font-size: 13px;margin-top: 5px;">你邀请对方参加【{$fromMe.activity.title}】活动,时间:{$fromMe.activity.start_time|date="m月d日",###},价格:{$fromMe['activity']['price']}元</p>
       </div>
     </div>
<p style="text-align: right;margin-bottom: 5px;">
              <span class="detail__item"  style="float: none;">
<if condition="$fromMe.status eq 0">等待对方回应
<elseif condition="$fromMe.status eq 1"/>对方已同意
<else />对方已拒绝
</if>
 </span>
</p>
</div>
</volist>

tomeinvite.html
<volist name="toMeInvite" id="toMe">
<div class="weui-cells">


 <div class="weui-cell">
 <a href="{:U('UserInfo/seniorinfo',array('uid'=>$toMe['invite_user']['id']))}"><div class="weui-cell__hd cell__hd"><img src="{$toMe.invite_user.headimgurl}" style="width: 50px;margin-right: 5px"/></div></a>
   <div class="weui-cell__bd cell__bd">
  <p style="font-size: 0px;">
  <span class="user-basic" >{$toMe.invite_user.nickname}</span>
            <if condition="$toMe['invite_user']['vip'] eq 1">
            <icon class="sex-icon vip"></icon>
            <elseif condition="$toMe['invite_user']['vip'] eq 0"/>
            </if>
          <if condition="$toMe['invite_user']['sex'] eq 1">
            <span class="sex-icon sex-icon__by"></span>
            <elseif condition="$toMe['invite_user']['sex'] eq 2"/>
            <span class="sex-icon sex-icon__gl"></span>
          </if>
  <p style="font-size: 13px;margin-top: 5px;">邀请你参加【{$toMe.activity.title}】活动,时间:{$toMe.activity.start_time|date="m月d日",###},<if condition="$toMe.type eq 0">价格:{$toMe['activity']['price']}元<elseif condition="$toMe.type eq 1"/>已为您付款</if></p>
       <p>邀请时间：{$toMe.invite_time}</p>
   </div>
 </div>
<p style="text-align: right;margin-bottom: 5px;">
 <span class="detail__item" style="float: none;">
<if condition="$toMe.status eq 0">
<span class="mark" data-type="agree" data-userid="{$toMe.user.id}" data-activityid="{$toMe.activity.id}">同意</span> | 
<span class="mark" data-type="refuse" data-userid="{$toMe.user.id}" data-activityid="{$toMe.activity.id}"> 拒绝</span>
<elseif condition="$toMe.status eq 1"/>我已同意
<else />我已拒绝
</if>
 </span>
</p>


</div>
</volist>

控制器下的方法如下
//邀请消息
public function invite(){
$this->display();
}


    //邀请列表的html
    public function listHtml(){
        if(session('?uid')){
            $uid = session('uid');
        }
        $page = I('get.page/d');
        $type = I('get.type/d');
        $invite = $this->inviteListFormat($page,$type,$uid);
        if($type == 0){
            $this->assign('toMeInvite',$invite);
            $this->display('tomeinvite');
        }else{
            $this->assign('fromMeInvite',$invite);
            $this->display('frommeinvite');
        }
    }


    //邀请总页数
    public function invitePages(){
        if(session('?uid')){
            $uid = session('uid');
        }
        $condition1['invite_uid'] = $uid;
        $condition2['uid'] = $uid;
        $perPageNum = 6;
        $pages1 = M('user_invite')->where($condition1)->count();
        $pages2 = M('user_invite')->where($condition2)->count();
        $this->ajaxReturn(array($pages1/$perPageNum,$pages2/$perPageNum));
    }




    //邀请格式化
    public function inviteListFormat($page,$type,$uid){
        if($type == 0){
            $condition['invite_uid'] = $uid;
            M('user_invite')->where(array('invite_uid'=>$uid))->setField('accept_read',1);
        }else{
            $condition['uid'] = $uid;
            M('user_invite')->where(array('uid'=>$uid))->setField('send_read',1);
        }


        $perPageNum = 6;
        $invite = M('user_invite')->where($condition)->order('id desc')->limit($page*$perPageNum,$perPageNum)->select();
        foreach($invite as $a=>$v){
             $invite[$a]['invite_time'] = date('m月d H点i',$invite[$a]['invite_time']);
             $invite[$a]['user']        = M('user')->where(array('id'=>$v['uid']))->field('nickname,headimgurl,id')->find();
             $invite[$a]['invite_user'] = M('user')->where(array('id'=>$v['invite_uid']))->field('nickname,headimgurl,id,sex,vip')->find();
             $invite[$a]['activity']    = M('activity')->where(array('id'=>$v['activity_id']))->field('title,start_time,price,id')->find();
                $invite[$a]['activity']['price'] = price($invite[$a]['activity']['price'],$invite[$a]['invite_user']['sex'],2)/100;
         }
        return $invite;
    }