เหตุใดฉันจึงเพิ่ม scrollTo(0, 0) และ blur() เมื่อนำทางไปหน้าละเอียด
Vue3 TypeScript Frontend UX
ภูมิหลัง
ในแอพสำหรับลูกค้าเช่า DVD เมื่อนำทางจากหน้ารายการภาพยนตร์ไปยังหน้าละเอียด เกิดปัญหาต่อไปนี้
- ตำแหน่งสกรอลล์ยังคงอยู่ที่ตำแหน่งเดิมของหน้ารายการ
- focus ค้างอยู่ที่ปุ่มที่กด ทำให้ดูไม่สวยงาม
วิธีแก้ปัญหา
ฉันเพิ่มโค้ดต่อไปนี้ใน event handler ของการนำทาง
window.scrollTo(0, 0)
;(event.target as HTMLElement).blur()
เหตุผลสำหรับ scrollTo(0, 0)
ในการจัดการสถานะด้วย currentPage ที่ไม่ใช้ Vue Router การรีเซ็ตสกรอลล์อัตโนมัติของ SPA จะไม่ทำงาน จึงต้องเรียกอย่างชัดเจน
เหตุผลสำหรับ blur()
หากปุ่มยังคง focus อยู่ขณะที่หน้าจอเปลี่ยน วงแหวน outline จะค้างอยู่ ทำให้ผู้ใช้รู้สึกแปลกๆ
สิ่งที่ฉันได้เรียนรู้
เมื่อ SPA ไม่ใช้ router รายละเอียด UX ที่ framework มักจัดการให้อัตโนมัติ จำเป็นต้องเติมเต็มด้วยมือเอง