thinkphp + mui 移动端上拉加载分页

框架thinkphp6， 后台代码：

public function wClass(){
        //每页显示条数
        $num = 5;

        $map[] = ['vi_status','=','1'];
        
        //+++++++++++++++++++++++ ajax获取下一页 开始+++++++++++++++++
        if(input('page')){  //上拉加载更多
            //传入分页值
            $page = input('page');
            //查询
            $data = Db::name('video')->where($map)->order('vi_time desc')->limit($page*$num,$num)->select();
            foreach($data as $k => $v){
                $data[$k]['vi_info'] = cutstr_htmls($v['vi_info'],180); //处理字符串
                $data[$k]['vi_time'] = date('Y-m-d',$v['vi_time']); //处理时间
            }   
            return json(['info'=>$data,'status'=>1]);
        }
        //+++++++++++++++++++++++ ajax获取下一页 结束+++++++++++++++++

        //查询，用户没有触发分页时的代码
        $data = Db::name('video')->where($map)->order('vi_time desc')->limit(0,$num)->select();
       
        return view('wClass',[
        	'data' => $data,
            'num' => $num,
            'navTit' => '微课堂'
        ]);
    }

前端模板页（必须引入的文件 jquery 库文件jquery.min.js ，mui.min.js ，mui.min.css），注意dom格式：

 

<!--下拉刷新容器 注意，关于mui的分页加载模式，必须要有两个div容器包裹，它默认选取第二层容器作为触发容器，也就是说用户滑动第二层容器的时候开始加载 -->
<!-- article-box start -->
<div class="mui-scroll-wrapper article-box volunteer-box wClass-box"> <!-- 此容器是调用关键  -->
    <div class="mui-scroll full_box"> <!-- 必须多加一个容器，不然触摸上拉加载会显得很突兀 ，必须要该容器，且记住设置该容器高度大于内容 -->
    {volist name="data" id="vo"} <!-- 下面是数据库第一次加载读取的数据，此时未触发分页，每遍历一次使用一个div容器包括，便于ajax分页读取的时候也方便填充内容 -->
        <div class="article-list">
        	<a href="{:url('Video/wClassInfo',['vi_id'=>$vo.vi_id])}">
        	<div class="list_l">
        		<img src="__static__/images/play.png" class="list_play">
                <div class="vMask"></div> <!--遮罩层-->
                <video class="videos">您的浏览器不支持Video标签。
                    <source src="__upload__/video/{$vo.vi_url}" type="video/mp4">
                    <source src="__upload__/video/{$vo.vi_url}" type="video/ogg">
                    <source src="__upload__/video/{$vo.vi_url}" type="video/WebM">
                </video>                
        	</div>
        	<div class="list_r">
        		<div class="list_tit">{$vo.vi_title}</div>
        		<div class="list_txt">{$vo.vi_info|cutstr_htmls=180}</div>
        		<div class="list_time">{$vo.vi_time|date='Y-m-d'}</div>
        	</div>
        	</a>
        </div>
    {/volist}
    </div>
</div>
<!-- article-box end -->

<script type="text/javascript">
//执行分页的关键代码 上一页 下一页
mui.init({
    pullRefresh: {
        container: '.wClass-box', //下拉刷新容器标识,css选择器均可
        down: {
            style: 'circle', //下拉刷新样式,目前支持原生5+ ‘circle’ 样式
            callback: pulldownRefresh //刷新函数,比如通过ajax从服务器获取新数据
        },
        up: {
            auto: false, //首次加载自动上拉加载一次
            contentrefresh : '正在加载中...', //正在加载状态时,控件上显示的标题内容
            contentnomore:'没有更多的数据啦', //请求完毕若没有更多数据时显示的提醒内容
            callback: pullupRefresh //刷新函数,比如通过ajax从服务器获取新数据
        }
    }
});
            
/*
 * 上拉显示更多
 */
var currentPage = 1; //当前页(++)
var isOver = false; //是否加载完
var pageSize = "{$num}"; //每页显示条数
            
function pullupRefresh() {
    setTimeout(function() {         
        mui.ajax({
            url: "{:url('Video/wClass')}",
            type:'post',
            data: {'page':currentPage},
            dataType: 'json', 
            success: function(data) {
                // console.log(data,info);                
                if (data.status == 1 && data.info != null && data.info.length != 0){
                    var info = data.info;
                    for(var i = 0; i< info.length; i++){  
                        var htmls = '<div class="article-list"><a href="{:url('Video/wClassInfo',['vi_id'=>'+info[i].vi_id+'])}"><div class="list_l"><img src="__static__/images/play.png" class="list_play"><div class="vMask"></div><video class="videos">您的浏览器不支持Video标签。<source src="__upload__/video/'+info[i].vi_url+'" type="video/mp4"><source src="__upload__/video/'+info[i].vi_url+'" type="video/ogg"><source src="__upload__/video/'+info[i].vi_url+'" type="video/WebM"></video></div><div class="list_r"><div class="list_tit">'+info[i].vi_title+'</div><div class="list_txt">'+info[i].vi_info+'</div><div class="list_time">'+info[i].vi_time+'</div></div></a></div>';
                        //遍历一次追加一次数据，也可以先获取封装完好一起追加
                        $(".wClass-box > div").find('.article-list').last().after(htmls);
                    }
                    //判断是否还有数据,若小于每次加载条数,结束  
                    if(info.length < pageSize){
                        isOver = true;
                        mui('.wClass-box').pullRefresh().endPullupToRefresh(true); //停止下拉显示暂无数据
                    }
                    //每次加载结束之后，如果还有数据则++  
                    if(isOver == false){
                        currentPage++;
                        mui('.wClass-box').pullRefresh().endPullupToRefresh(true); //停止正在加载
                        mui('.wClass-box').pullRefresh().enablePullupToRefresh(); //显示上拉加载文字
                    }
                }else{
                    mui('.wClass-box').pullRefresh().endPullupToRefresh(true); //停止下拉显示暂无数据
                }
            },
            error:function(request) {
                console.log(request);
            }, 
        });
    }, 600);
}
 
/**
 * 下拉刷新
 */
function pulldownRefresh(){
    setTimeout(function() {
        //直接页面刷新
        window.location.reload();
        mui('.wClass-box').pullRefresh().endPulldownToRefresh(); 
    }, 600);
    
}
            
//重置上拉加载
//mui('#pullup-container').pullRefresh().refresh(true);
            
//禁用上拉刷新
//mui('#pullup-container').pullRefresh().disablePullupToRefresh();
            
//启用上拉刷新
//mui('#pullup-container').pullRefresh().enablePullupToRefresh();
            
//页面禁用下拉刷新动作
//mui.plusReady(function() {
//  plus.webview.currentWebview().setPullToRefresh({support:false});
//});
            

</script>