-
Notifications
You must be signed in to change notification settings - Fork 12
Open
Labels
Description
简述需求
Ant Design Vue 的 Tree 组件支持 智能自动滚动(Auto Scroll) 功能,类似 auto 行为。
https://3x.antdv.com/components/tree
scrollTo 方法的auto
当前 scrollToKey 表现 |
期望的智能滚动表现 |
|---|---|
| 总是将目标节点滚动到 列表最上方(顶部对齐) | 智能判断:节点如果在视野内则不滚动;不在视野内时,当被滚动数据在视口上方时候滚到顶部,反正则滚到底部 |
// 伪代码,key可以是索引也可以是绑定的key 参考Ant Design Vue tree组件源码判断边界(不完全准确,大概是这个思路)
const smartScrollToKey = (key: string) => {
if (!listRef.value) return
const offset = listRef.value.getOffset()
const clientSize = listRef.value.getClientSize()
const itemSize = listRef.value.getSize(key)
const targetIndex = treeList.value.findIndex((item) => item.url === key)
if (targetIndex === -1) return
const itemTop = targetIndex * itemSize
const itemBottom = itemTop + itemSize
const scrollBottom = offset + clientSize
if (itemTop < offset) {
console.log('需要滚动到顶部')
listRef.value.scrollToKey(key)
} else if (itemBottom > scrollBottom) {
console.log('需要滚动到底部')
listRef.value.scrollToOffset(itemBottom - clientSize)
}
}