微信小程序实现点击导航标签滚动定位到对应位
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现点击导航标签滚动定位到对应位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文要实现的是点击标签滚动定位到对应位置，且给在当前板块范围指定的导航标签添加样式
效果的话看狼蚁网站SEO优化GIF
wxml部分
top当前离顶部滚动的距离
block_ScrollTop是当前模块离顶部的距离，多减60是因为我的导航是悬浮的，会挡住部分内容，自行修改；
specify-style是我自定义选中标签时的样式，可自行更改；
<!-- 导航 -->
<view class='nav' id="tab-con">
<view class='resume-title'>伟安的简历</view>
<view bindtap="toblock1" class="{{top<block2_ScrollTop-60?'specify-style':''}}">关于我</view>
<view bindtap="toblock2" class="{{top>=block2_ScrollTop-60&&top<block3_ScrollTop-60?'specify-style':''}}">工作经验</view>
<view bindtap="toblock3" class="{{top>=block3_ScrollTop-60?'specify-style':''}}">项目经验</view>
</view>
<!-- 中部内容 -->
<view class="body">
<scroll-view class="list" scroll-y="true" style="height:{{winHeight}}">
<view id='block_1'>
<!-- 第一个板块 -->
</view>
<view id='block_2'>
<!-- 第二个板块 -->
</view>
<view id='block_3'>
<!-- 第三个板块 -->
</view>
<view id='block_3'>
<!-- 嗯，高度不够凑数的 -->
</view>
</scroll-view>
</view>
wxss选中的字体加粗以及底部三角形样式参考
用了伪类::before画了三角形,板块没有内容所以加了高度。
.nav {
display: flex;
justify-content: space-around;
align-items: center;
height: 100rpx;
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
.specify-style {
font-weight: 800;
position: relative;
}
.specify-style::before {
content: '';
border: solid transparent;
border-width: 0px 14rpx 14rpx 14rpx;
border-bottom-color: snow;
position: absolute;
z-index: 1000;
margin-top: 36rpx;
left: 37%;
}
#block_1,
#block_2,
#block_3 {
height: 70vh;
}
#block_1 {
background-color: aqua;
}
#block_2 {
background-color: bisque;
}
#block_3 {
background-color: cadetblue;
}
js部分
先是在onLoad中拿到自适应winHeight赋值到scroll-view组件；
然后通过createSelectorQuery方法获取顶部id、板块一id、板块二id、板块三id离顶部的距离；
然后通过onPageScroll方法时时监听获取当前位置离顶部滚动的距离；
然后通过pageScrollTo实现点击跳转定位；
Page({
data: {
//当前离顶部滚动的距离
top: 0,
},
// 监听滚动事件 scrollTop 滚动的距离
onPageScroll: function (e) { // 获取滚动条当前位置
// console.log(e)
this.setData({
top: e.scrollTop
})
if (e.scrollTop > this.data.tabScrollTop) {
this.setData({
tabFixed: true
})
// console.log("我锁定了")
} else {
this.setData({
tabFixed: false
})
}
},
//点击跳转到板块一
toblock1: function () {
wx.pageScrollTo({
/*
*多减50是因为我的导航是悬浮的，会挡住部分内容
*这里是1等于2rpx
*/
scrollTop: this.data.block1_ScrollTop - 50
})
},
//点击跳转到板块二
toblock2: function () {
wx.pageScrollTo({
scrollTop: this.data.block2_ScrollTop - 50
})
},
//点击跳转到板块三
toblock3: function () {
wx.pageScrollTo({
scrollTop: this.data.block3_ScrollTop - 50
})
},
onLoad: function (options) {
let that = this
// 高度自适应
wx.getSystemInfo({
success: function (res) {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR;
that.setData({
winHeight: calc
});
}
});
var query = wx.createSelectorQuery()
//获取顶部的距离
query.select('#tab-con').boundingClientRect(function (res) {
var top = res.top;
if (top == null) {
var top = 0;
}
that.setData({
tabScrollTop: top
})
}).exec()
//获取板块一离顶部的距离
query.select('#block_1').boundingClientRect(function (res) {
that.setData({
block_1ScrollTop: res.top
})
}).exec()
//获取板块二离顶部的距离
query.select('#block_2').boundingClientRect(function (res) {
that.setData({
block2_ScrollTop: res.top
})
}).exec()
//获取板块三离顶部的距离
query.select('#block_3').boundingClientRect(function (res) {
that.setData({
block3_ScrollTop: res.top
})
}).exec()
},
})
为大家推荐现在关注度比较高的微信小程序教程一篇：长沙网络推广为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。