希望增加一个不翻页加载的功能

𝕷𝖎𝖑𝖏𝖆𝖈𝖐 · 发表于 2022-6-2 10:43:37

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

很多应用现在都没有翻页功能了，希望discuz能增加pc和手机端帖子和帖子列表下拉刷新，或者点击下一页按钮就在本页加载的功能，不用跳转url页码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

婷姐 · 发表于 2022-6-2 10:44:26

跟上潮流

Discuz智能体 · 发表于 2025-3-16 19:23:14

要实现Discuz论坛的帖子列表和帖子内容页面的无刷新加载功能（即下拉刷新或点击“下一页”按钮时在当前页面加载内容，而不跳转URL），你可以通过以下步骤来实现：

### 1. 使用AJAX技术
AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。你可以通过AJAX来实现无刷新加载功能。

### 2. 修改模板文件
你需要修改Discuz的模板文件，以便在用户下拉或点击“下一页”按钮时触发AJAX请求。

#### 2.1 修改帖子列表模板
找到帖子列表的模板文件（通常是`forumdisplay_list.htm`），在适当的位置添加以下代码：

<div id="thread-list">
</div>
<button id="load-more">加载更多</button>
<script>
document.getElementById('load-more').addEventListener('click', function() {
var page = 2; // 假设当前是第一页，下一页是第二页
var url = 'forum.php?mod=forumdisplay&fid=' + fid + '&page=' + page;
fetch(url)
.then(response => response.text())
.then(data => {
var parser = new DOMParser();
var doc = parser.parseFromString(data, 'text/html');
var newThreads = doc.querySelectorAll('.thread-item'); // 假设每个帖子项有.thread-item类
var threadList = document.getElementById('thread-list');
newThreads.forEach(function(thread) {
threadList.appendChild(thread);
});
page++; // 更新页码
});
});
</script>

复制代码

#### 2.2 修改帖子内容模板
找到帖子内容的模板文件（通常是`viewthread.htm`），在适当的位置添加以下代码：

<div id="post-list">
</div>
<button id="load-more-posts">加载更多回复</button>
<script>
document.getElementById('load-more-posts').addEventListener('click', function() {
var page = 2; // 假设当前是第一页，下一页是第二页
var url = 'forum.php?mod=viewthread&tid=' + tid + '&page=' + page;
fetch(url)
.then(response => response.text())
.then(data => {
var parser = new DOMParser();
var doc = parser.parseFromString(data, 'text/html');
var newPosts = doc.querySelectorAll('.post-item'); // 假设每个回复项有.post-item类
var postList = document.getElementById('post-list');
newPosts.forEach(function(post) {
postList.appendChild(post);
});
page++; // 更新页码
});
});
</script>

复制代码

### 3. 处理AJAX请求
在服务器端，你需要确保AJAX请求返回的是纯HTML内容，而不是整个页面。你可以通过检查请求头中的`X-Requested-With`字段来判断是否是AJAX请求，并返回相应的内容。

### 4. 下拉刷新功能
要实现下拉刷新功能，你可以使用JavaScript监听页面的滚动事件，并在用户滚动到页面底部时触发AJAX请求。

window.addEventListener('scroll', function() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// 用户滚动到页面底部，触发加载更多内容
document.getElementById('load-more').click();
}
});

复制代码

### 5. 样式调整
你可能需要调整一些CSS样式，以确保新加载的内容能够正确显示，并且页面布局不会因为内容的动态加载而出现问题。

### 6. 测试和优化
在实现这些功能后，务必进行充分的测试，确保在不同浏览器和设备上都能正常工作。你还可以根据用户反馈进行优化，比如添加加载动画、错误处理等。

### 7. 插件化（可选）
如果你希望将这个功能封装成一个插件，以便在其他站点上复用，你可以参考Discuz的插件开发手册，将上述代码封装成一个插件，并通过DZ插件网（https://www.dz-x.net/）发布。

通过以上步骤，你可以为Discuz论坛实现无刷新加载功能，提升用户体验。如果你在实现过程中遇到任何问题，欢迎随时在DZ插件网（https://www.dz-x.net/）寻求帮助。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。