Infinite Scroll 是一種常用的前端效果，當(dāng)文章頁面比較多，且內(nèi)容比較簡短時，使用Infinite Scroll 效果可以讓用戶不用刷新頁面就可以瀏覽更多信息，非常方便。
以前我們實現(xiàn) Infinite Scroll 效果時，經(jīng)常會使用插件或 Infinite Ajax Scroll，今天，借助HTMX庫的幫助，我們可以很簡單的在主題是實現(xiàn) Infinite Scroll 效果，而不再依賴其他插件。下面我們來看一下具體的實現(xiàn)方法。
首先，我們需要修改模版文章循環(huán)
首先我們需要修改文章列表頁的文章循環(huán)代碼如以下樣式，注意其中的 ht- 這些是 HTMX 的語法。
<div id="posts-container">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php get_template_part('template-parts/content', get_post_format()); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php if ($wp_query->max_num_pages > 1) : ?>
<button hx-get="<?php echo admin_url('admin-ajax.php'); ?>?action=load_more_posts&page=2"
hx-target="#posts-container"
hx-trigger="click, intersect once"
hx-swap="beforeend"
hx-indicator="#loading">
Load More
</button>
<div id="loading" class="htmx-indicator">Loading...</div>
<?php endif; ?>然后 實現(xiàn)加載更多文章的后端
第二步，我們需要實現(xiàn)一個 Ajax 功能，HTMX 會發(fā)送請求到這個 Ajax 地址，然后 這個 Ajax 地址會返回此次查詢的文章以及下一頁的加載按鈕。
add_action('wp_ajax_load_more_posts', 'load_more_posts');add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');
function load_more_posts() {
$page = $_GET['page'];
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => get_option('posts_per_page'),
'paged' => $page,
);
$query = new WP_Query($args);
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
get_template_part('template-parts/content', get_post_format());
endwhile;
endif;
wp_reset_postdata();
if ($page < $query->max_num_pages) {
echo '<button hx-get="' . admin_url('admin-ajax.php') . '?action=load_more_posts&page=' . ($page + 1) . '"
hx-target="#posts-container"
hx-trigger="click, intersect once"
hx-swap="beforeend"
hx-indicator="#loading">
Load More
</button>';
}
die();
}現(xiàn)在，讓我們來解釋一下上面的代碼。
- HTMX 庫通過 hx-* 屬性來控制 AJAX 行為。
- hx-get 指定了 AJAX 請求的 URL。
- hx-target 指定了新內(nèi)容應(yīng)該插入的位置。
- hx-trigger 設(shè)置了觸發(fā) AJAX 請求的事件。在這里，我們使用 “click” 和 “intersect once”，這意味著當(dāng)按鈕被點擊或進(jìn)入視口時會觸發(fā)請求。
- hx-swap 指定了如何插入新內(nèi)容。”beforeend” 表示在目標(biāo)元素的末尾插入。
- hx-indicator 用于顯示加載指示器。
- 這個實現(xiàn)會在用戶滾動到頁面底部或點擊 “Load More” 按鈕時加載更多文章。新的文章會被添加到現(xiàn)有文章列表的末尾，并且會自動生成新的 “Load More” 按鈕（如果還有更多頁面）。
整個過程中，我們除了需要在一開始引入 HTMX庫，沒有編寫任何 JavaScript 代碼，然后，如果你剛好也使用了 Tailwind CSS，連 CSS 也不用寫了，整個開發(fā)過程中，只需要編寫 PHP 和 HTML 代碼就可以完成開發(fā)，省去了切換語言帶來的心智負(fù)擔(dān)，整個開發(fā)過程會非常順暢，效率也會提高很多，建議有新項目需要開發(fā)的朋友嘗試一下。
