138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
|
// @ts-nocheck
|
|||
|
|
// #ifdef UNI-APP-X && APP
|
|||
|
|
// export * from './uvue.uts'
|
|||
|
|
export { getRect, getAllRect } from './uvue.uts'
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
|
|||
|
|
// #ifndef UNI-APP-X && APP
|
|||
|
|
// export * from './vue.ts'
|
|||
|
|
export { getRect, getAllRect } from './vue.ts'
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取视口滚动条位置信息
|
|||
|
|
*/
|
|||
|
|
export function getViewportScrollInfo() : Promise<any> {
|
|||
|
|
return new Promise(resolve => {
|
|||
|
|
uni.createSelectorQuery()
|
|||
|
|
.selectViewport()
|
|||
|
|
.scrollOffset((res) => {
|
|||
|
|
resolve(res);
|
|||
|
|
}).exec();
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
```
|
|||
|
|
page
|
|||
|
|
╱
|
|||
|
|
╭───────────────╮ viewport
|
|||
|
|
╭─│─ ─ ─ ─ ─ ─ ─ ─│─╮ ╱
|
|||
|
|
│ │ ╭───────────╮ │ │
|
|||
|
|
│ │ │ element │ │ │
|
|||
|
|
│ │ ╰───────────╯ │ │
|
|||
|
|
╰─│─ ─ ─ ─ ─ ─ ─ ─│─╯
|
|||
|
|
│ │
|
|||
|
|
│ │
|
|||
|
|
╰───────────────╯
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# 参数
|
|||
|
|
- viewportHeight: viewport 高度
|
|||
|
|
- viewportScrollTop: viewport 垂直滚动值
|
|||
|
|
- elementHeight: element 高度
|
|||
|
|
- elementOffsetTop: element 距离页面顶部距离
|
|||
|
|
|
|||
|
|
# 选项
|
|||
|
|
- position: element 在视窗中的位置(start, center, end, nearest)
|
|||
|
|
- startOffset: element 距离视窗顶部的偏移量
|
|||
|
|
- endOffset: element 距离视窗底部的偏移量
|
|||
|
|
|
|||
|
|
# 结果值
|
|||
|
|
- viewportScrollTop: viewport 新的垂直滚动值
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
export type ScrollIntoViewOptions = {
|
|||
|
|
/** 元素顶部需要保留的缓冲距离（默认 0） */
|
|||
|
|
startOffset ?: number;
|
|||
|
|
/** 元素底部需要保留的缓冲距离（默认 0） */
|
|||
|
|
endOffset ?: number;
|
|||
|
|
/** 滚动对齐方式：start/center/end/nearest（默认 nearest） */
|
|||
|
|
position ?: 'start' | 'center' | 'end' | 'nearest';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算元素需要滚动到可视区域的目标滚动位置
|
|||
|
|
* @param viewportHeight 视口高度（像素）
|
|||
|
|
* @param viewportScrollTop 当前滚动位置（像素）
|
|||
|
|
* @param elementHeight 元素高度（像素）
|
|||
|
|
* @param elementOffsetTop 元素相对于父容器顶部的偏移量（像素）
|
|||
|
|
* @param options 配置选项
|
|||
|
|
* @returns 计算后的目标滚动位置（像素）
|
|||
|
|
*
|
|||
|
|
* @example
|
|||
|
|
* // 示例：将元素滚动到视口顶部对齐
|
|||
|
|
* const scrollTop = getScrollIntoViewValue(
|
|||
|
|
* 500, // 视口高度
|
|||
|
|
* 200, // 当前滚动位置
|
|||
|
|
* 100, // 元素高度
|
|||
|
|
* 300, // 元素偏移量
|
|||
|
|
* { position: 'start' }
|
|||
|
|
* );
|
|||
|
|
*/
|
|||
|
|
export function getScrollIntoViewValue(
|
|||
|
|
viewportHeight : number,
|
|||
|
|
viewportScrollTop : number,
|
|||
|
|
elementHeight : number,
|
|||
|
|
elementOffsetTop : number,
|
|||
|
|
options : ScrollIntoViewOptions = {}
|
|||
|
|
) : number {
|
|||
|
|
let { startOffset = 0, endOffset = 0, position = 'nearest'} = options;
|
|||
|
|
|
|||
|
|
// 计算元素相对于视口的上下偏移量
|
|||
|
|
const elementToViewportTopOffset = elementOffsetTop - viewportScrollTop - startOffset;
|
|||
|
|
const elementToViewportBottomOffset =
|
|||
|
|
elementOffsetTop +
|
|||
|
|
elementHeight -
|
|||
|
|
viewportScrollTop -
|
|||
|
|
viewportHeight +
|
|||
|
|
endOffset;
|
|||
|
|
|
|||
|
|
// 处理 nearest 模式，自动选择最近边缘
|
|||
|
|
if (position == 'nearest') {
|
|||
|
|
if (elementToViewportTopOffset >= 0 && elementToViewportBottomOffset <= 0) {
|
|||
|
|
return viewportScrollTop;
|
|||
|
|
}
|
|||
|
|
position =
|
|||
|
|
Math.abs(elementToViewportTopOffset) > Math.abs(elementToViewportBottomOffset)
|
|||
|
|
? 'end'
|
|||
|
|
: 'start';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据不同的对齐位置计算目标滚动位置
|
|||
|
|
let nextScrollTop = 0;
|
|||
|
|
switch (position) {
|
|||
|
|
case 'start':
|
|||
|
|
// 顶部对齐：元素顶部对齐视口顶部（考虑顶部缓冲）
|
|||
|
|
nextScrollTop = elementOffsetTop - startOffset;
|
|||
|
|
break;
|
|||
|
|
case 'center':
|
|||
|
|
// 居中对齐：元素中心对齐视口中心（考虑上下缓冲）
|
|||
|
|
nextScrollTop =
|
|||
|
|
elementOffsetTop -
|
|||
|
|
(viewportHeight - elementHeight - endOffset - startOffset) / 2 +
|
|||
|
|
startOffset;
|
|||
|
|
break;
|
|||
|
|
case 'end':
|
|||
|
|
// 底部对齐：元素底部对齐视口底部（考虑底部缓冲）
|
|||
|
|
nextScrollTop =
|
|||
|
|
elementOffsetTop + elementHeight - viewportHeight + endOffset;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return nextScrollTop;
|
|||
|
|
}
|