商品详情里面有多个tab选项，滚动到一定程序悬浮固定，并且点击相应的tab可以通过锚点跳转
zzzzzfreea
- 发布：2020-06-12 10:42
- 更新：2020-06-12 11:41
- 阅读：5791
我是这样实现的：
首先监听页面滚动实时记录当前页面滚动高度pageTop（在onPageScroll生命周期里可以监听到scrollTop）;
在点击相应tab的时候传来点击的相应index（在每个要跳转的锚点上要有相应的class）；
然后获取相应锚点的节点信息并将屏幕滚动到相应位置：
uni.createSelectorQuery().in(this).select(".tab_item" + index).boundingClientRect(data => {
uni.pageScrollTo({
scrollTop:data.top + this.pageTop,
duration:100
})
}).exec();
如果只需要在h5上实现就更简单了，只需要给相应的锚点加上相应的ref值比如第一个锚点就是ref="tab_item1",然后点击相应tab传来index后做如下操作：
uni.pageScrollTo({
scrollTop: this.$refs['tab_item' + index].$el.offsetTop,
duration: 100
});
至于滚动到一定高度悬浮固定，只需要在监听屏幕滚动并记录后判断这个scrollTop达到固定的高度后给tab增加一个悬浮固定的class就行了
希望对你有用
zzzzzfreea (作者)
前面说到的都是点击tab,有个问题就是滚动到相应位置也要标记当前对应的tab怎么操作
2020-06-12 13:55
Tckin
回复 zzzzzfreea:这个问题我感觉我做的性能不太好你可以自己琢磨一下，我是在onPageScroll生命周期里循环查询每个锚点节点信息，发现top小于0了就说明页面滚动到这个锚点了，然后相应tab就激活
2020-06-15 11:03