html部分
<view class="nav-list" v-show="isList">
<view class="list-text" v-for="(item,index) in navList" :key="index" @tap="clickNav(index)">{{item.text}}</view>
</view>
js部分(对应的变量提前在data中定义好)
1、在onLoad中拿到自适应winHeight赋值到scroll-view组件;
2、通过createSelectorQuery方法获取顶部id、对应板块一id离顶部的距离;
3、通过onPageScroll方法时时监听获取当前位置离顶部滚动的距离;
4、最后通过pageScrollTo实现点击跳转定位;
onLoad() {
uni.getSystemInfo({
success: (res) => {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR;
this.winHeight = calc
}
})
},
uni官网里面写到使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。所以我把他放在在moutend生命周期里面
mounted() {
var query = uni.createSelectorQuery()
//获取对应模块到顶部的距离
query.select('#block1').boundingClientRect((res) => {
//console.log(res)
this.block_1ScrollTop = res.top
}).exec()
query.select('#block2').boundingClientRect((res) => {
this.block_2ScrollTop = res.top
}).exec()
query.select('#block3').boundingClientRect((res) => {
this.block_3ScrollTop = res.top
}).exec()
},
onPageScroll(res) {//监听滚动事件,获取滚动条的当前位置
//当距离大于120时显示回到顶部按钮
if(res.scrollTop > 120){
this.btnFlag = true
} else {
this.btnFlag = false
};
// console.log(res);
this.top = res.scrollTop
},
点击到对应模块的方法
减去30是因为我的导航栏是悬浮固定定位在顶部的,不减去他会挡住一部分
clickNav(index){
this.isList = false
this.navIcon = true
if(index == 0){
console.log('跳转首页');
} else {
if(index == 1){
uni.pageScrollTo({
scrollTop:this.block_1ScrollTop - 30
})
} else {
if(index == 2){
uni.pageScrollTo({
scrollTop:this.block_2ScrollTop - 30
})
} else {
if(index == 3){
uni.pageScrollTo({
scrollTop:this.block_3ScrollTop - 30
})
}
}
}
}
},