在APP端没有document, window,要实现滚动就要借助scroll-view,要获取窗口高度和列表项高度就要借助uniapp的API.
scroll-view
<scroll-view :scroll-top="scrollTop" scroll-y="true">
仅需改变scrollTop的值就可以实现区域滚动
const query = uni.createSelectorQuery().in(this)
将选择器的选取范围更改为自定义组件this内,返回一个 SelectorQuery 对象实例。
(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
query.select(selector).boundingClientRect(callback)
在当前页面下选择第一个匹配选择器 selector 的节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。boundingClientRect获取布局信息
selectorQuery.selectAll(selector).boundingClientRect(callback)
在当前页面下选择匹配选择器 selector 的所有节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。获取到的是一个列表
selectorQuery.exec(callback)
执行所有的请求。请求结果按请求次序构成数组,在 callback 的第一个参数中返回。
实现步骤:
1、获取定位项在列表中的index值
2、获取区域滚动的高度
3、获取每一项的高度
4、计算当前项前的列表叠加的高度,既当前项的top,当当前项不在当前窗口,需要滚动到指定高度,当当前项在当前窗口,则不滚动,当查找项目只有一半部分在当前窗口,则滚动到当前项目之前叠加的高度
if (currentIndex > -1) {
this.$nextTick(()=>{
const query = uni.createSelectorQuery().in(this)
query
.select('#tableBody')
.boundingClientRect()
query.selectAll('#tableBody .item-tr')
.boundingClientRect()
query.exec(res => {
const data1 = res[0]
let scrollTop = 0
let sumheight = 0
if (res[1] && Array.isArray(res[1]) && res[1].length > 0) {
res[1].forEach((item, index) => {
if (index < currentIndex) {
sumheight += item.height
}
})
// 当查找项高度不在当前窗口,需要滚动到指定高度
// 当查找项目在当前窗口,则不滚动
// 当查找项目只有一半部分在当前窗口,则滚动到当前项目之前叠加的高度
scrollTop = (sumheight > data1.height) ? sumheight : (res[1][currentIndex].height + sumheight) > data1.height ? sumheight : 0
}
this.scrollTop = scrollTop
})
})
}
这个方法实现的在pc端和app端都可以