49 lines
1.6 KiB
JavaScript
Executable File
49 lines
1.6 KiB
JavaScript
Executable File
/**
|
||
* fInitArticleLoader - 终极适配版（解决 append:false 导致 prefill 失效的问题）
|
||
*/
|
||
export const fInitArticleLoader = () => {
|
||
const $oContainer = $('.list-home');
|
||
const sSlug = $('meta[name="slug"]').attr('content') || "freenode";
|
||
|
||
if (!$oContainer.length) return;
|
||
|
||
// 1. 初始化
|
||
$oContainer.infiniteScroll({
|
||
path: `/${sSlug}?page={{#}}`,
|
||
|
||
/**
|
||
* 【核心修正】
|
||
* 必须指定 append 选择器，prefill 才能计算高度并自动追载。
|
||
* 即使你返回的是纯碎片，只要碎片里带有这个类名，插件就能活。
|
||
*/
|
||
append: '.ajax-item',
|
||
|
||
history: false,
|
||
prefill: true, // 现在它能正常点火了
|
||
status: '.page-load-status',
|
||
scrollThreshold: 600,
|
||
responseBody: 'text', // 保持 text 模式处理碎片
|
||
});
|
||
|
||
/**
|
||
* 2. 既然开启了 append，插件会自动把 HTML 塞进容器。
|
||
* 我们只需要监听 'append' 事件来处理“艺术效果”。
|
||
*/
|
||
$oContainer.on('append.infiniteScroll', (oEvent, xResponse, sPath, aItems) => {
|
||
// aItems 就是插件刚刚帮你塞进去的那些新 DOM 元素
|
||
const $aNewItems = $(aItems);
|
||
|
||
// 高标准动画处理
|
||
$aNewItems.addClass('ajax-item-fade-in');
|
||
|
||
// 强制重绘后触发动画
|
||
setTimeout(() => {
|
||
$aNewItems.addClass('is-visible');
|
||
}, 50);
|
||
|
||
console.log(`[ArticleLoader] 自动填充并追加成功: ${sPath}`);
|
||
});
|
||
|
||
console.log('[ArticleLoader] 模式：Append渲染 + Prefill自检');
|
||
};
|