<button id="g80sy"></button>
  • <abbr id="g80sy"></abbr>
  • <button id="g80sy"></button>
    <rt id="g80sy"><delect id="g80sy"></delect></rt>
  • thinkphp6配合Layui實(shí)現(xiàn)流加載

    程序猿 2021-03-25 14:33:13 8735瀏覽 加載中

    thinkphp6代碼

    // 渲染首頁(yè)
    public function index()
    {
        return View::fetch();
    }
    // 準(zhǔn)備流數(shù)據(jù)
    public function list(){
        $list = Archives::where("status",1)
            ->with(["sheng","shi","qu"])
            ->order("id desc")
            ->paginate(["list_rows"=>10,"page"=>$this->page]);
        return $this->success("ok",$list);
    }

    前端代碼

    <div class="main">
        <ul id="flow">
        </ul>
    </div>
    
    <script src="/static/layui/layui.all.js"></script>
    <script>
        var $ = layui.$;
        var flow = layui.flow;
        flow.load({
            elem: '#flow' //指定列表容器
            ,done: function(page, next){ //到達(dá)臨界點(diǎn)(默認(rèn)滾動(dòng)觸發(fā)),觸發(fā)下一頁(yè)
                var lis = [];
                //以jQuery的Ajax請(qǐng)求為例,請(qǐng)求下一頁(yè)數(shù)據(jù)(注意:page是從2開(kāi)始返回)
                $.get('/index/index/list?page='+page, function(res){
                    //假設(shè)你的列表返回在data集合中
                    if (res.code == 1) {
                        var data = res.data;
                        layui.each(data.data, function(index, item){
                            lis.push("<li>\n" +
                                "                <a href=\""+item.url+"\" class=\"clearfix\">\n" +
                                "                    <div class=\"item-img\">\n" +
                                "                        <img src=\""+item.litpic+"\" alt=\"\">\n" +
                                "                    </div>\n" +
                                "                    <div class=\"item-txt\">\n" +
                                "                        <div class=\"item-tit\">" + item.title+"</div>\n" +
                                "                        <div class=\"item-distance\">"+item.title2+"</div>\n" +
                                "                        <div class=\"item-time\">\n" +
                                "                            開(kāi)園時(shí)間:"+item.start_time+"-" + item.end_time +
                                "                        </div>\n" +
                                "                        <div class=\"item-adress\">\n" + item.sheng.name +
                                "                            -"+item.shi.name + "-" + item.qu.name +
                                "                        </div>\n" +
                                "                    </div>\n" +
                                "                </a>\n" +
                                "            </li>");
                        });
    
                        //執(zhí)行下一頁(yè)渲染,第二參數(shù)為:滿足“加載更多”的條件,即后面仍有分頁(yè)
                        //pages為Ajax返回的總頁(yè)數(shù),只有當(dāng)前頁(yè)小于總頁(yè)數(shù)的情況下,才會(huì)繼續(xù)出現(xiàn)加載更多
                        next(lis.join(''), page < res.last_page);
                    }
    
                });
            }
        });
    </script>

    基本Li里面的數(shù)據(jù)需要根據(jù)自己的邏輯去拼接字符串,就到這里吧!

    標(biāo)簽: thinkphp6 Layui 流加載
    最后修改:2025-03-23 19:24:37

    非特殊說(shuō)明,本博所有文章均為博主原創(chuàng)。

    主站蜘蛛池模板: 贞丰县| 祁门县| 武鸣县| 九台市| 时尚| 渝中区| 晴隆县| 丁青县| 大城县| 会东县| 彝良县| 荣昌县| 恩平市| 蚌埠市| 灵武市| 五莲县| 克东县| 紫金县| 灵石县| 神池县| 景宁| 沂水县| 衡东县| 登封市| 来凤县| 婺源县| 枝江市| 木兰县| 滦平县| 咸宁市| 永仁县| 祁东县| 临桂县| 迁安市| 阿城市| 孝昌县| 紫阳县| 定兴县| 南江县| 南昌县| 平谷区|