如何使用ThinkPHP6實現無限滾動-ThinkPHP-PHP中文網

隨著網路的不斷發展，無限滾動已成為現代網頁設計的重要元素。無限滾動效果可以幫助提高使用者體驗，讓使用者更輕鬆地獲取訊息，提高使用者黏性。本文將介紹如何使用ThinkPHP6框架實現無限滾動效果。

引入jQuery框架

在實作無限捲動之前，首先需要先介紹jQuery框架。可以使用CDN來加速存取速度，也可以將jQuery下載到本地以獲得更穩定的存取。

建立基本的HTML範本

在HTML中，需要依照下列結構定義清單的範本：

  第一条数据
 第二条数据
 第三条数据
 ... 
 Loading...

登入後複製

其中，# infinite-scroll是一個大容器，用於包裹整個清單。#list是用來顯示資料的容器。#loading是用來顯示載入提示的容器。

寫Ajax請求程式碼

在實作無限捲動之前，需要先寫Ajax請求程式碼。可以使用jQuery的$.ajax()方法來實現：

$.ajax({ url: "/path/to/server", // 请求的服务器地址 type: "POST", // 请求方式 data: {'last_id' : last_id}, // 最后一个数据的id dataType: "json", // 数据类型 beforeSend: function () { $("#loading").show(); // 显示加载提示 }, success: function (data) { if(data.status == 200){ // 成功获取数据 var html = ""; $(data.data).each(function (index, item) { html += '' + item.title + '
'; }); $("#list").append(html); // 将获取的数据追加到列表中 last_id = data.last_id; // 更新最后一条数据的id } else { // 数据获取失败 alert(data.message); } }, complete: function () { $("#loading").hide(); // 隐藏加载提示 }, error: function () { alert("数据获取失败，请稍后重试"); } });

登入後複製

在請求成功後，將傳回JSON格式的資料。可以透過$(data.data)來取得傳回的數據，然後將其追加到資料容器中。

實作無限捲動效果

當使用者捲動到清單底部時，就會觸發請求資料的Ajax請求。可以透過$(window).scroll()方法來實現無限滾動的效果：

$(window).scroll(function () { if ($(document).scrollTop() + $(window).height() > $(document).height() - 100) { // 检测用户滚动到底部 loadMore(); } }); function loadMore() { $.ajax({ url: "/path/to/server", type: "POST", data: {'last_id' : last_id}, dataType: "json", beforeSend: function () { $("#loading").show(); // 显示加载提示 }, success: function (data) { if(data.status == 200){ // 成功获取数据 var html = ""; $(data.data).each(function (index, item) { html += '' + item.title + '
'; }); $("#list").append(html); last_id = data.last_id; } else { // 数据获取失败 alert(data.message); } }, complete: function () { $("#loading").hide(); // 隐藏加载提示 }, error: function () { alert("数据获取失败，请稍后重试"); } }); }

登入後複製

使用ThinkPHP6實現無限滾動效果

#在使用ThinkPHP6框架中，需要定義一個控制器來取得資料。可以參考以下程式碼：

', $last_id)->limit(10)->order('id', 'asc')->select(); $data = []; foreach ($articles as $article) { $data[] = [ 'id' => $article->id, 'title' => $article->title ]; } return json(['status' => 200, 'data' => $data, 'last_id' => $articles->isEmpty() ? $last_id : $articles->last()->getId()]); } }

登入後複製

在定義控制器時，首先要引入對應的Model，然後透過Model來取得資料庫中的資料。在取得完資料後，需要將資料格式化為JSON格式，然後傳回前端。