uni-app scroll-view + tab锚点定位

逻辑梳理：在实现相应交互时对整个过程做一下分析

1：如何计算tab对应view滚动的距离？

根据大家需要实现的UI效果对应调整

return new Promise(resolve => {
	if(index == 0) {
		resolve(0);
		return;
	}
	uni.createSelectorQuery().in(this).select(`#view${index}`).boundingClientRect(
	data => { //目标位置节点 类或者 id
		uni.createSelectorQuery().in(this).select(".scroll-view").boundingClientRect((
			res) => { //最外层盒子节点类或者 id
				let scrollViewTop = (data.top - res.top);
				resolve(scrollViewTop);
			}).exec()
	}).exec();
});

2：如何滑动至指定位置？

1. 页面层的滚动：
   uni.pageScrollTo({ scrollTop: 0, duration: 100, });
2. scroll-view层的滚动：
   :scroll-top="number" 设置对应属性值来实现
:scroll-into-view="id-view" 设置对应属性值来实现

3：滑动时如何判断tab当前索引？

获取当前滚动位置，与tab对应的view滚动区间做对比：

1. 获取当前滚动位置scrollTop（number）
   页面层的滚动：
   使用生命周期onPageScroll()进行监听
   scroll-view层的滚动：
   通过事件@scroll 进行监听
   -以此获取当前滚动位置
2. tab对应的view滚动区间scrollViewTopData（array）：
   通过上面第一点计算，我们已经拿到
   满足 (scrollTop < (scrollViewTopData[i + 1]) ||
   (i + 1 == scrollViewTopData.length && scrollViewTopData[i] <= scrollTop)
   设置 currentTabIndex = i;

4：切换tab时注意事项以及优化？

1. 滚动监听优化，合理节流例如：1滚动监听加延时，2切换tab时加标识阻止滚动监听；
2. 确保页面渲染成功；
3. 滚动时，计算不准确，可能为负数；
4. 页面数据变化时，记得重新计算，以免滚动位置不准确；