<template>
<view class="page_bg">
<view class="nav" :style="{'height':topHeight,'line-height':topHeight}">导航</view>
<view class="header" :style="{ 'padding-top': topHeight }" id="scrollTop">tab未置顶时头部展示</view>
<view class="tag_box" id="istab1" :style="{ top: topHeight }">
<view class="tag" :class="currentAnchor == 1 ? 'active' : ''" @click="changeAnchor(1)">tab1</view>
<view class="tag" :class="currentAnchor == 2 ? 'active' : ''" @click="changeAnchor(2)">tab2</view>
<view class="tag" :class="currentAnchor == 3 ? 'active' : ''" @click="changeAnchor(3)">tab3</view>
</view>
<view class="box1" id="anchor1">box1</view>
<view class="box2" id="anchor2">box2</view>
<view class="box3" id="anchor3">box3</view>
</view>
</template>
script
<script>
export default {
data() {
return {
topHeight:0,
fixedTop: 0,
currentAnchor: 1,
index1: 0, //tab的高度
index2: 0, //第二个子元素的top
index3: 0, //第二个子元素的top
IsShow: true //用来阻止滚动产生的bug
};
},
created() {
let statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
let screenHeight = uni.getSystemInfoSync()['screenHeight'];
this.topHeight = statusBarHeight * 2 + 88 + 'rpx';
this.fixedTop = statusBarHeight + 44; //自定义导航高度
},
onPageScroll(e) {
console.log('onPageScroll----->>>>>>>', e);
this.IsShow ? this.getTop() : '';
},
mounted() {
this.$nextTick(function(){
this.getDefault()
})
},
methods: {
//tab切换
changeAnchor(index) {
this.currentAnchor = index;
this.IsShow = false; //在点击事件中 页面滚动依然会触发滚动事件 因而用这个值进行限制
if (index == 1) {
uni.pageScrollTo({
//页面滚动行为
scrollTop: this.index1,
duration: 300
});
console.log(this.index1, '======>this.index1');
setTimeout(() => {
this.IsShow = true;
}, 300); //时间同页面滚动行为时间一样
} else if (index == 2) {
console.log(this.index2, '======>this.index2');
uni.pageScrollTo({
scrollTop: this.index2,
duration: 300
});
setTimeout(() => {
this.IsShow = true;
}, 300);
} else if (index == 3) {
uni.pageScrollTo({
scrollTop: this.index3,
duration: 300
});
console.log(this.index3, '======>this.index3');
setTimeout(() => {
this.IsShow = true;
}, 300);
} else {
let top = res[0].height;
uni.pageScrollTo({
scrollTop: top,
duration: 300
});
setTimeout(() => {
this.IsShow = true;
}, 300);
}
},
getDefault() {
const query = uni.createSelectorQuery();
query.select('#istab1').boundingClientRect(); //获取要操作的元素
query.select('#anchor1').boundingClientRect();
query.select('#anchor2').boundingClientRect();
query.select('#anchor3').boundingClientRect();
query.select('#scrollTop').boundingClientRect();
query.exec(res => {
console.log(res, '===res');
this.index1 = res[4].height - this.fixedTop+1;
this.index2 = res[1].height + res[4].height - this.fixedTop+1;
this.index3 = res[1].height + res[2].height + res[4].height - this.fixedTop+1;
});
},
getTop(index) {
const query = uni.createSelectorQuery();
query.select('#istab1').boundingClientRect();
query.select('#anchor1').boundingClientRect();
query.select('#anchor2').boundingClientRect();
query.select('#anchor3').boundingClientRect();
query.select('#blueBgImg').boundingClientRect();
query.exec(res => {
if (res[1].top <= res[0].height + this.fixedTop && res[1].bottom >= res[0].height + this.fixedTop) {
//判断
this.currentAnchor = 1;
} else if (res[1].bottom <= res[0].height + this.fixedTop && res[2].bottom >= res[0].height + this.fixedTop) {
this.currentAnchor = 2;
} else if (res[2].bottom <= res[0].height + this.fixedTop && res[3].bottom >= res[0].height + this.fixedTop) {
this.currentAnchor = 3;
//如果您需要更多的页面 则这样添加即可 记得在上面获取 以及在初始化时也获取
// else if (res[0].top == 0 && res[3].bottom <= res[0].height && res[4].bottom >= res[0].height) {
// this.index = 4
// }
} else {
// this.currentAnchor = 1;
// this.currentAnchor = 0
// console.log('----else-----gettop');
}
});
}
}
};
</script>
scss
<style scoped lang="scss">
.nav{
position: fixed;
left: 0;
top: 0;
width: 100%;
text-align: center;
color: #333;
z-index: 99;
background-color: #FFFFFF;
}
.header{
background-color: red;
height: 600rpx;
text-align: center;
}
.tag_box {
padding: 16rpx 32rpx;
background: #F5F5F5;
position: sticky !important;
margin-top: auto;
display: flex;
align-items: center;
.tag {
margin-right: 40rpx;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 44rpx;
}
.active {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1B4EFD;
position: relative;
&::after {
content: '';
width: 32rpx;
height: 6rpx;
background: #1B4EFD;
border-radius: 3rpx;
overflow: hidden;
position: absolute;
bottom: -8rpx;
left: 50%;
transform: translateX(-50%);
}
}
}
.box1{
height:800rpx;
background: green;
}
.box2{
height:800rpx;
background: orange;
}
.box3{
height:1200rpx;
background: pink;
}
</style>
参考原文链接：https://blog.csdn.net/weixin_47821281/article/details/108275971
