yeyinly/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: close panel when scroll

Browse Source
This commit is contained in:
shinya
2025-08-14 22:52:46 +08:00
parent 2b123d29e0
commit a9c5b9408d
2 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MultiLevelSelector.tsx
+9 -10
View File
@@ -460,11 +460,12 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
return value === optionValue; return value === optionValue;
}; };
// 监听滚动和窗口大小变化事件，重新计算位置 // 监听滚动和窗口大小变化事件
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
// 滚动时直接关闭面板，而不是重新计算位置
if (activeCategory) { if (activeCategory) {
calculateDropdownPosition(activeCategory); setActiveCategory(null);
} }
}; };
@@ -474,10 +475,11 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
} }
}; };
window.addEventListener('scroll', handleScroll); // 监听 body 滚动事件，因为该项目的滚动容器是 document.body
document.body.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => { return () => {
window.removeEventListener('scroll', handleScroll); document.body.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
}; };
}, [activeCategory]); }, [activeCategory]);
@@ -514,8 +516,7 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
> >
<button <button
onClick={() => handleCategoryClick(category.key)} onClick={() => handleCategoryClick(category.key)}
className={`relative z-10 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-4 md:py-2 text-xs sm:text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${ className={`relative z-10 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-4 md:py-2 text-xs sm:text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${activeCategory === category.key
activeCategory === category.key
? isDefaultValue(category.key) ? isDefaultValue(category.key)
? 'text-gray-900 dark:text-gray-100 cursor-default' ? 'text-gray-900 dark:text-gray-100 cursor-default'
: 'text-green-600 dark:text-green-400 cursor-default' : 'text-green-600 dark:text-green-400 cursor-default'
@@ -526,8 +527,7 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
> >
<span>{getDisplayText(category.key)}</span> <span>{getDisplayText(category.key)}</span>
<svg <svg
className={`inline-block w-2.5 h-2.5 sm:w-3 sm:h-3 ml-0.5 sm:ml-1 transition-transform duration-200 ${ className={`inline-block w-2.5 h-2.5 sm:w-3 sm:h-3 ml-0.5 sm:ml-1 transition-transform duration-200 ${activeCategory === category.key ? 'rotate-180' : ''
activeCategory === category.key ? 'rotate-180' : ''
}`} }`}
fill='none' fill='none'
stroke='currentColor' stroke='currentColor'
@@ -571,8 +571,7 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
onClick={() => onClick={() =>
handleOptionSelect(activeCategory, option.value) handleOptionSelect(activeCategory, option.value)
} }
className={`px-2 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-lg transition-all duration-200 text-left ${ className={`px-2 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-lg transition-all duration-200 text-left ${isOptionSelected(activeCategory, option.value)
isOptionSelected(activeCategory, option.value)
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-700' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-700'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100/80 dark:hover:bg-gray-700/80' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100/80 dark:hover:bg-gray-700/80'
}`} }`}
src/components/SearchResultFilter.tsx
+7 -3
View File
@@ -111,15 +111,19 @@ const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, val
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
if (activeCategory) calculateDropdownPosition(activeCategory); // 滚动时直接关闭面板，而不是重新计算位置
if (activeCategory) {
setActiveCategory(null);
}
}; };
const handleResize = () => { const handleResize = () => {
if (activeCategory) calculateDropdownPosition(activeCategory); if (activeCategory) calculateDropdownPosition(activeCategory);
}; };
window.addEventListener('scroll', handleScroll); // 监听 body 滚动事件，因为该项目的滚动容器是 document.body
document.body.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => { return () => {
window.removeEventListener('scroll', handleScroll); document.body.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
}; };
}, [activeCategory]); }, [activeCategory]);