小程序实现锚点定位和滚动选中（非scroll-view方式）

最新推荐文章于 2023-11-27 09:19:37 发布

Bestytyj

最新推荐文章于 2023-11-27 09:19:37 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序锚点定位

本文链接：https://blog.youkuaiyun.com/Bestytyj/article/details/99713408

当页面高度不确定，scroll-view无法实现锚点定位时，本文介绍了一种灵活的方法。通过滚动到对应位置选中标签和点击标签滚动到对应位置两部分实现。在每个模块上方添加高度等于导航栏的view，并设置虚拟id，点击时滚动到顶部，从而解决定位问题。通过计算页面元素差值确定滚动距离，完成动态锚点定位功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scroll-view实现滚动和锚点必须设置高度，但是页面高度没有确定的情况，这种方法就没有办法实现功能，针对这种情况找到一种方法实现锚点定位就很重要了，查找相关内容，使用的方法都为scroll-view方式，不够灵活。本方法可以实现模块高度任意变化，不需要再次改变代码

实现这一功能分为两个部分，分别是滚动到页面对应位置选择对应的nav标签和点击标签滚动到对应位置。

(1)滚动到对应位置选中对应的标签，具体实现如下：

onPageScroll: function(e) {
const scrolltop = e.scrolltop;
const _this = this;
//可以获取某个id到顶部的距离
const query = wx.createSelectorQuery()
query.select('#first').boundingClientRect()
query.select('#second').boundingClientRect()
query.select('#third').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res) {
  if (res[0].top <= 0) {
    _this.setData({
      navShow: true
    })
  } else {
    _this.setData({
      navShow: false
    })
  }
  //判断选择的位置
  if (res[1].top > 0) {
    _this.setData({
      navChange: 1
    })
  } else
  if (res[0].top <= 0 && res[1].top > 0) {
    _this.setData({
      navChange: 1
    })
  } else if (res[1].top <= 0 && res[2].top > 0) {
    _this.setData({