其他框架和原生都適用

html程式碼：

<ul class="list">
    <?php if(!empty($model)){foreach ($model as $key) { ?>
        <li class="line">
            <a href="javascript:void(0)" onclick="myclick('/goods/details?id=<?php echo $key["id"]?>')">
            </a>
        </li>
    <?php }}else{echo '非常抱歉，暫時沒有資料....';} ?>
</ul>
<div class="nodata" style="text-align:center"></div>
 

js：

<script>
    // 頁數
    var page = 1;
    // 每頁展示5個
    var size = 5;
    //滾動條到頁面底部載入更多案例
    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();    //滾動條距離頂部的高度
        var scrollHeight = $(document).height();   //當前頁面的總高度
        var clientHeight = $(this).height();    //當前可視的頁面高度
        // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
        if (scrollTop + clientHeight >= scrollHeight) {   //距離頂部+當前高度 >=文件總高度 即代表滑動到底部
                //滾動條到達底部
            $(".nodata").show().html("載入中...");
            page++;
            $.getJSON("/goods/load", {page: page, size: size}, function (data) {
                json = data.data;
                if (json) {
                    var str = "";
                    //var arr = "";
                    $.each(json, function (what, array) {
                        str = "<li class=\"line\">\n" +
                            "<a href=\"javascript:void(0)\" onclick=\"myclick(\'/goods/details?id="+array['id'] +"\')\">" +
                            "</a>\n" +
                            "</li>";

                        $(".list").append(str);
                    });
                } else {

                    $(".nodata").show().html("已經到底了...");
                    return false;
                }
            });
        }
    });
</script>
<script>
    function myclick(url){
        sessionStorage.setItem('index_list',$(".list").html());//儲存列表資料
        sessionStorage.setItem('index_page',page);//儲存頁碼
        sessionStorage.setItem('index_scroll',$(window).scrollTop());//儲存滾動條位置
        window.location.href = url;
        return false;
    }
</script>
<script>
    var l = sessionStorage.getItem('index_list');
    if(null !== l && '' !== l){
        // 恢復資料
        $(".list").html(l);
        $(window).scrollTop(sessionStorage.getItem('index_scroll'));
        page = sessionStorage.getItem('index_page');

        //刪除快取
        sessionStorage.removeItem('index_list');
        sessionStorage.removeItem('index_page');
        sessionStorage.removeItem('index_scroll');
    }
    // else{
    //     p = {$data|json_encode}
    //     showData();
    //  }
</script>
 

控制器程式碼：

public function actionGoodslist(){
        $model = new GoodsModel();
        $model = $model->search();//print_r($model);exit;
        return $this->renderPartial('goods_list',[
            'model' => $model,
        ]);
    }
    public function actionLoad()
    {
        $params = Yii::$app->request->get();
        $page = $params['page'];  //獲取請求的頁數
        $pagenum = $params['size'];; //每頁數量
        $start = ($page - 1) * $pagenum;
        $sql = "SELECT * FROM tre_tbkcoupon WHERE title like '%女裝%' ORDER BY id DESC LIMIT $start," . $pagenum . "";
        $model = Yii::$app->getDb()->createCommand($sql)->queryAll();
        $data = ['data' => $model];
        return json_encode($data);
    }
 

actionLoad()裡 teturn json_encode($data);的資料格式是這樣的

{"data":[
    {"id":"3103","title":"11\u4e2d","coupon_info":"1","post_price":1.75},
    {"id":"3063","title":"\u7ae5\u978b","coupon_info":"20","post_price":39},
    {"id":"3060","title":"2018\u79cb","coupon_info":"2","post_price":27},
    {"id":"2861","title":"\u674e\u5b81","coupon_info":"20","post_price":169},
    {"id":"2854","title":"ins\u8d85","coupon_info":"5","post_price":34.9}
]}

模型程式碼：

public function search(){
        $sql = "SELECT * FROM tre_tbkcoupon WHERE title like '%女裝%' ORDER BY id DESC limit 5";
        $query = Yii::$app->getDb()->createCommand($sql)->queryAll();
        
        return $query;
    }