微信小程序中实现点击导航标签滚动定位到对应位置

本文要实现的是点击标签滚动定位到对应位置，且给在当前板块范围指定的导航标签添加样式

效果的话看下面GIF

wxml部分

top为当前滚动条离顶部的距离；
block1_top、block2_top、block3_top分别是每一个板块距离页面顶部的距离；
selected为自定义选中标签时的样式；

<!-- 导航 -->
<view class='nav'>
	<view class='resume-title'>我的简历</view>
	<view bindtap="toBlock1" class="{{top<block2_top-60?'selected':''}}">关于我</view>
	<view bindtap="toBlock2" class="{{top>=block2_top-60&&top<block3_top-60?'selected':''}}">工作经验</view>
	<view bindtap="toBlock3" class="{{top>=block3_top-60?'selected':''}}">项目经验</view>
</view>
<!-- 中部内容 -->
<view class="main">
	<scroll-view class="list" scroll-y="true" style="height:{{winHeight}}">
		<view id='block1'>
			<!-- 第一个板块 -->
		</view>
		<view id='block2'>
			<!-- 第二个板块 -->
		</view>
		<view id='block3'>
			<!-- 第三个板块 -->
		</view>
	</scroll-view>
</view>

wxss选中的字体加粗以及底部三角形样式参考

用了伪类::before画了选择样式的三角形，板块没有内容所以加了高度。

.nav {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100rpx;
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
}

.selected {
  font-weight: bolder;
  position: relative;
}

.selected::before {
  z-index: 1000;
  content: '';
  position: absolute;
  left: 37%;
  margin-top: 40rpx;
  border: solid transparent;
  border-width: 0px 14rpx 14rpx 14rpx;
  border-bottom-color: snow;
}

#block1,
#block2,
#block3 {
  height: 100vh;
}

#block1 {
  background-color: aqua;
}

#block2 {
  background-color: bisque;
}

#block3 {
  background-color: cadetblue;
}

js部分

先是在onLoad中拿到自适应winHeight赋值到scroll-view组件；
然后通过createSelectorQuery方法获取顶部id、板块一id、板块二id、板块三id离顶部的距离；
然后通过onPageScroll方法时时监听获取当前位置离顶部滚动的距离；
然后通过pageScrollTo实现点击跳转定位；

Page({
  data: {
    // 当前离顶部滚动的距离
    top: 0,
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  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('#block1').boundingClientRect(function (res) {
      that.setData({
        block1_top: res.top
      })
    }).exec()
    // 获取板块二离顶部的距离
    query.select('#block2').boundingClientRect(function (res) {
      that.setData({
        block2_top: res.top
      })
    }).exec()
    // 获取板块三离顶部的距离
    query.select('#block3').boundingClientRect(function (res) {
      that.setData({
        block3_top: res.top
      })
    }).exec()
  },

  // 监听滚动事件
  onPageScroll: function (e) {
    // console.log(e)
    // 滚动条当前位置
    let scrollTop = e.scrollTop
    this.setData({
      top: scrollTop
    })
  },

  // 点击滚动到板块一
  toBlock1: function () {
    wx.pageScrollTo({
      /*
       * 多减50是因为我的导航是悬浮的，会挡住部分内容
       * 这里约是1等于2rpx
       */
      scrollTop: this.data.block1_top - 50,
      duration: 300 // 滚动动画的时长，单位 ms
    })
  },

  // 点击滚动到板块二
  toBlock2: function () {
    wx.pageScrollTo({
      scrollTop: this.data.block2_top - 50,
      duration: 300
    })
  },

  // 点击滚动到板块三
  toBlock3: function () {
    wx.pageScrollTo({
      scrollTop: this.data.block3_top - 50,
      duration: 300
    })
  },
})