如图:
使用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);
},