app如何实现悬浮框滚动到那个模块定位到那。

如图：

使用uniapp内置方法??onPageScroll? ?获取到滚动了多少。

其实拿到屏幕滚动多少就很简单了，下面是思路。

tap栏切换效果代码就不贴了。直接贴如何到那个模块定位到哪，和点击定位到当前模块。

<view v-if="show" class="tab-box">
?? ??? ??? ?<view class="overflowView">
?? ??? ??? ?<view class="tab-item" @click="testTabClick(index)" :class="tabIndex == index?'active':''" v-for="(item,index) in tabList" :key="index">
?? ??? ??? ??? ?{{item.name}}
?? ??? ??? ?</view>
?? ??? ??? ?</view>
?? ??? ?</view>

onPageScroll(res) {
?? ??? ??? ??? ?let scrollTopone ?= 650
?? ??? ??? ??? ?let scrollToper ?= 1150
?? ??? ??? ??? ?let scrollTopthree = 1550
?? ??? ??? ??? ?let scrollTopfour ?= 1750
?? ??? ??? ??? ?let scrollTopfive ?= 1850
?? ??? ??? ??? ?console.log(res.scrollTop);

? ? ? ? ? ? ? ? ?这样判断的意思是多少到多少之间，滚动到相应的位置，高亮对应tap栏。
?? ??? ??? ??? ?if (res.scrollTop >= 300 && res.scrollTop <= scrollTopone) {
?? ??? ??? ??? ??? ?this.tabIndex = 1
?? ??? ??? ??? ?}else if (res.scrollTop >= 650 && res.scrollTop <= scrollToper) {
?? ??? ??? ??? ??? ?this.tabIndex = 2
?? ??? ??? ??? ?}else if (res.scrollTop >= 1150 && res.scrollTop <= scrollTopthree) {
?? ??? ??? ??? ??? ?this.tabIndex = 3
?? ??? ??? ??? ?}else if (res.scrollTop >= 1550 && res.scrollTop <= scrollTopfour) {
?? ??? ??? ??? ??? ?this.tabIndex = 4
?? ??? ??? ??? ?}else if (res.scrollTop >= 1750 && res.scrollTop <= scrollTopfive) {
?? ??? ??? ??? ??? ?this.tabIndex = 5
?? ??? ??? ??? ?}else {
?? ??? ??? ??? ??? ?this.tabIndex = 6
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if (res.scrollTop >= 300) {
?? ??? ??? ??? ??? ?this.show= true
?? ??? ??? ??? ?}else if (res.scrollTop < 300 ) {
?? ??? ??? ??? ??? ?this.show= false
?? ??? ??? ??? ?}
?? ??? ??? ?},

点击那个模块定位到当前模块。

testTabClick(index) {
?? ??? ??? ??? ?if (index == 0) {
?? ??? ??? ??? ??? ?document.documentElement.scrollTop = 0
?? ??? ??? ??? ?}else if (index == 1) {
?? ??? ??? ??? ??? ?document.documentElement.scrollTop = 300
?? ??? ??? ??? ?}else if (index == 2) {
?? ??? ??? ??? ??? ?document.documentElement.scrollTop = 650
?? ??? ??? ??? ?}else if (index == 3) {
?? ??? ??? ??? ??? ?document.documentElement.scrollTop = 1150
?? ??? ??? ??? ?}else if (index == 4) {
?? ??? ??? ??? ??? ?document.documentElement.scrollTop = 1550
?? ??? ??? ??? ?}else if (index == 5) {
?? ??? ??? ??? ??? ?document.documentElement.scrollTop = 1750
?? ??? ??? ??? ?}else if (index == 6) {
?? ??? ??? ??? ??? ?document.documentElement.scrollTop = 2000
?? ??? ??? ??? ?}
?? ??? ??? ??? ?this.tabIndex = index
?? ??? ??? ??? ?console.log(this.tabIndex);
?? ??? ??? ?},