feat(Home组件): 为快速导航添加触摸事件支持

添加触摸事件处理函数以实现移动端快速导航功能,包括触摸开始、移动和结束事件。同时禁用浏览器默认触摸处理以防止页面滚动冲突。
This commit is contained in:
Linkon
2026-01-18 21:43:42 +08:00
parent 8c2377c5b5
commit e625ef0c50
+25 -1
View File
@@ -454,6 +454,26 @@ export const Home: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
document.removeEventListener('mouseup', onGlobalMouseUp)
}
// 触摸事件处理
const onNavTouchStart = (e: React.TouchEvent) => {
isNavDragging.current = true
if (e.touches[0]) {
handleNavAction(e.touches[0].clientY)
}
}
const onNavTouchMove = (e: React.TouchEvent) => {
if (isNavDragging.current && e.touches[0]) {
handleNavAction(e.touches[0].clientY)
// 防止触摸滑动时触发页面滚动
if (e.cancelable) e.preventDefault()
}
}
const onNavTouchEnd = () => {
isNavDragging.current = false
}
// 渲染快速导航
const renderQuickNav = () => {
if (groupedStudents.length <= 1 || sortType === 'score' || (sortType === 'alphabet' && searchKeyword)) return null
@@ -462,6 +482,9 @@ export const Home: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
<div
ref={navContainerRef}
onMouseDown={onNavMouseDown}
onTouchStart={onNavTouchStart}
onTouchMove={onNavTouchMove}
onTouchEnd={onNavTouchEnd}
style={{
position: 'fixed',
right: '12px',
@@ -477,7 +500,8 @@ export const Home: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
maxHeight: '80vh',
border: '1px solid var(--ss-border-color)',
cursor: 'pointer',
userSelect: 'none'
userSelect: 'none',
touchAction: 'none' // 关键:禁用浏览器的默认触摸处理
}}
>
{groupedStudents.map((group) => (