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>