先看代码，复制使用即可，这是纵向滑动屏幕导航栏跟随滑动的效果，是一个最基础的判断滚动距离和元素距离顶部高度的方式构成的，您将看到以下效果。
以下是代码 复制粘贴即可 ， 这是一个非常基础的原理，我并未进行封装或更高深的写法，为了方便您理解（尤其是作为新手，主要给您提供思路），同时并未借助框架或别的，拿来即用。部分思路我将放在注释中。
<template>
<view class="ComBox">
<view class="box">
站位
</view>
<view class="istab" id="istab1"> <!-- 这里用来 position: sticky 来达到吸顶效果， -->
<!-- 这里是头部tab 我写了很高 方便您预留空间以作修改 -->
<view class="item" :class="index==1?'somitem':''" @click="Change(1)">评论</view>
<view class="item" :class="index==2?'somitem':''" @click="Change(2)">详情</view>
<view class="item" :class="index==3?'somitem':''" @click="Change(3)">图文</view>
</view>
<view class="son1" id="son01">
<!-- 根据id 选择dom 获取其位置信息 -->
评论
</view>
<view class="son2" id="son02">
详情
</view>
<view class="son3" id="son03">
图文
</view>
<view class="box">
站位
</view>
<view class="box">
站位
</view>
<view class="box">
站位
</view>
<view class="box">
站位
</view>
<view class="box">
站位
</view>
<view class="box">
站位
</view>
<view class="box">
站位
</view>
</view>
</template>
<script>
export default {
data() {
return {
index: 0,
index1: 0, //tab的高度
index2: 0, //第二个子元素的top
index3: 0, //第二个子元素的top
IsShow: true, //用来阻止滚动产生的bug
};
},
methods: {
Change(index) {
this.index = index
this.IsShow = false //在点击事件中 页面滚动依然会触发滚动事件 因而用这个值进行限制
if (index == 1) {
wx.pageScrollTo({
//页面滚动行为
scrollTop: this.index1,
duration: 300
});
setTimeout(() => {
this.IsShow = true
}, 300) //时间同页面滚动行为时间一样
} else if (index == 2) {
wx.pageScrollTo({
scrollTop: this.index2,
duration: 300
});
setTimeout(() => {
this.IsShow = true
}, 300)
} else if (index == 3) {
wx.pageScrollTo({
scrollTop: this.index3,
duration: 300
});
setTimeout(() => {
this.IsShow = true
}, 300)
} else {
let top = res[0].height
wx.pageScrollTo({
scrollTop: top,
duration: 300
});
setTimeout(() => {
this.IsShow = true
}, 300)
}
},
getDefault() {
const query = wx.createSelectorQuery()
query.select('#istab1').boundingClientRect() //获取要操作的元素
query.select('#son01').boundingClientRect()
query.select('#son02').boundingClientRect()
query.select('#son03').boundingClientRect()
query.exec((res) => {
this.index1 = res[0].height
this.index2 = res[2].top - res[0].height + 1
this.index3 = res[3].top - res[0].height + 1
})
},
getTop(index) {
const query = wx.createSelectorQuery()
query.select('#istab1').boundingClientRect()
query.select('#son01').boundingClientRect()
query.select('#son02').boundingClientRect()
query.select('#son03').boundingClientRect()
query.exec((res) => {
if (res[0].top == 0 && res[1].top <= res[0].height && res[1].bottom >= res[0].height) {
//判断
this.index = 1
} else if (res[0].top == 0 && res[1].bottom <= res[0].height && res[2].bottom >= res[0].height) {
this.index = 2
} else if (res[0].top == 0 && res[2].bottom <= res[0].height && res[3].bottom >= res[0].height) {
this.index = 3
//如果您需要更多的页面 则这样添加即可 记得在上面获取 以及在初始化时也获取
// else if (res[0].top == 0 && res[3].bottom <= res[0].height && res[4].bottom >= res[0].height) {
// this.index = 4
// }
} else {
this.index = 0
}
})
}
},
onPageScroll(e) {
this.IsShow ? this.getTop() : ''
},
onLoad() {
this.getDefault() //获取初始化的位置高度
}
};
</script>
<style lang="scss" scoped>
.ComBox {
height: auto;
position: relative;
.box {
height: 200rpx;
background: #f7f7f7;
border: 1rpx solid skyblue;
box-sizing: border-box;
text-align: center;
line-height: 200rpx;
}
.istab {
height: 200rpx;
position: sticky !important;
text-align: center;
line-height: 200rpx;
z-index: 999;
top: 0;
display: flex;
justify-content: space-between;
background: #fff;
.item {
width: 25%;
background: #f7f7f7;
}
.somitem {
color:red;
font-size:40rpx;
}
}
.son1 {
height: 600rpx;
background: red;
}
.son2 {
height: 800rpx;
background: yellow;
}
.son3 {
height: 500rpx;
background: red;
}
}
</style>
其他有关uniapp的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。