A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化页面布局和交互体验

Browse Source 
- 使用sticky定位替代fixed定位，提升滚动体验
- 添加视频播放图标和图片展示功能
- 实现搜索框热门关键词轮播效果
- 优化编辑器链接插入功能
- 调整组件样式和布局细节
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-11-10 19:06:58 +08:00
parent b7feedb350
commit 5cdbeb249f
26 changed files with 517 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
js/search.js
View File

@@ -229,30 +229,37 @@ const appSearch = createApp({
const matterFixed = ref(false);
const handleScroll = () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = window.innerHeight;
const sideHeight = sidebarRef.value.offsetHeight;
const matterTop = matterRef.value.offsetTop;
const matterHeight = matterContentRef.value.offsetHeight;
matterHeight.value = -(document.querySelector(".matter-content").offsetHeight - window.innerHeight);
sidebarHeight.value = -(document.querySelector(".sidebar-box").offsetHeight - window.innerHeight);
console.log("sideHeight", sideHeight);
console.log("matterHeight", matterHeight);
if (sideHeight < matterHeight) {
// 侧边栏滚动固定
if (scrollTop >= matterTop + sideHeight - clientHeight) sidebarFixed.value = true;
else sidebarFixed.value = false;
} else {
if (scrollTop >= matterTop + matterHeight - clientHeight) matterFixed.value = true;
else matterFixed.value = false;
}
// const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// const clientHeight = window.innerHeight;
// const sideHeight = sidebarRef.value.offsetHeight;
// const matterTop = matterRef.value.offsetTop;
// const matterHeight = matterContentRef.value.offsetHeight;
// console.log("sideHeight", sideHeight);
// console.log("matterHeight", matterHeight);
// if (sideHeight < matterHeight) {
// // 侧边栏滚动固定
// if (scrollTop >= matterTop + sideHeight - clientHeight) sidebarFixed.value = true;
// else sidebarFixed.value = false;
// } else {
// if (scrollTop >= matterTop + matterHeight - clientHeight) matterFixed.value = true;
// else matterFixed.value = false;
// }
};
const matterRef = ref(null);
const sidebarRef = ref(null);
const matterContentRef = ref(null);
return { matterFixed, matterContentRef, sidebarFixed, matterRef, sidebarRef, loading, typeValue, kwValue, startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage };
let sidebarHeight = ref(0);
let matterHeight = ref(0);
return { matterHeight, sidebarHeight, matterFixed, matterContentRef, sidebarFixed, matterRef, sidebarRef, loading, typeValue, kwValue, startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage };
},
});
appSearch.component("item-forum", itemForum);