feat: 添加应用图标搜索功能及相关页面
新增应用图标搜索功能,包括搜索表单、图标展示、加载更多和返回顶部按钮。页面结构、样式和交互逻辑均已实现。
This commit is contained in:
43
old/js/scripts.js
Normal file
43
old/js/scripts.js
Normal file
@@ -0,0 +1,43 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const loadMoreButton = document.getElementById("load-more");
|
||||
const backToTopButton = document.getElementById("back-to-top");
|
||||
|
||||
if (loadMoreButton) {
|
||||
loadMoreButton.addEventListener("click", function() {
|
||||
let offset = parseInt(this.getAttribute("data-offset"));
|
||||
const searchTerm = this.getAttribute("data-term");
|
||||
const limit = 40;
|
||||
|
||||
fetch(`index.php?term=${searchTerm}&offset=${offset}`)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = data;
|
||||
const newContent = tempDiv.querySelectorAll('.icon-grid div');
|
||||
newContent.forEach(item => document.querySelector('.icon-grid').appendChild(item));
|
||||
// 更新偏移量
|
||||
loadMoreButton.setAttribute("data-offset", offset + limit);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// 显示返回顶部按钮的逻辑
|
||||
window.onscroll = function() {
|
||||
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
|
||||
backToTopButton.style.display = "block";
|
||||
} else {
|
||||
backToTopButton.style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
// 返回顶部按钮点击事件
|
||||
backToTopButton.onclick = function() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
});
|
||||
document.getElementById('submit').addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Enter') {
|
||||
searchMovies(); // 按下回车键时执行搜索
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user