41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { logger } from './logger'
|
|
|
|
/**
|
|
* 导航滚动收缩共享 handler。
|
|
*
|
|
* v2 导航形态：进入页面是内容区的衬线大标题，向下滚动后收缩为居中玻璃小标题。
|
|
* 页面侧只接入一行（scroll-view 用 bindscroll，页面级滚动用 onPageScroll）：
|
|
* Page({ onNavScroll: navScroll }) // <scroll-view bindscroll="onNavScroll">
|
|
* Page({ onPageScroll: navPageScroll }) // 页面级滚动
|
|
*
|
|
* 性能：只在跨越阈值时 setData 一次，绝不逐帧更新。
|
|
*/
|
|
|
|
// 日志模块名
|
|
const LOG = 'nav'
|
|
|
|
// 滚动超过该距离（px）即切换为玻璃小标题态
|
|
export const NAV_THRESHOLD = 24
|
|
|
|
function apply(ctx: any, scrollTop: number): void {
|
|
if (!ctx || !ctx.data) return
|
|
const next = scrollTop > NAV_THRESHOLD
|
|
if (next === !!ctx.data.navScrolled) return
|
|
// 仅在首次进入玻璃态时打点，避免滚动过程刷屏
|
|
if (next && !ctx.__navLogged) {
|
|
ctx.__navLogged = true
|
|
logger.debug(LOG, '导航进入玻璃态, scrollTop=', scrollTop)
|
|
}
|
|
ctx.setData({ navScrolled: next })
|
|
}
|
|
|
|
/** scroll-view 的 bindscroll 处理器 */
|
|
export function navScroll(this: any, e: { detail?: { scrollTop?: number } }): void {
|
|
apply(this, (e && e.detail && e.detail.scrollTop) || 0)
|
|
}
|
|
|
|
/** 页面级滚动的 onPageScroll 处理器 */
|
|
export function navPageScroll(this: any, e: { scrollTop?: number }): void {
|
|
apply(this, (e && e.scrollTop) || 0)
|
|
}
|