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

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({
      navChange: 2
    })
  } else if (res[2].top <= 0 && res[3].top > 0) {
    _this.setData({
      navChange: 3
    })
  }
})
 },

(2)实现点击滚动到对应位置,
由于需要显示导航栏,所以点击选中的对应模块并不是移动到最顶部。由于导航栏单位为rpx,滚动时单位为px,无法实现准确定位。为了解决这一问题,把本模块上一模块中,添加的view,id设为本模块的id,高度设置为导航栏高度,只要点击时只要设置虚拟id滚动到顶部即可实现

 <view class="nav-same" id='advantage'></view>

css样式

.nav-same{
  height: 96rpx;
   width: 100%;
   position: absolute;
   bottom: 0rpx;
   left: 0rpx;
}

由于不确定某一模块显示时页面需要滚动的高度,获取页面第一个元素的位置和当前元素的差值,即为页面需要滚动的距离

setScrollTop(nav) {
    const _this = this;
    var nav = nav
    const query = wx.createSelectorQuery()
    query.select('#first').boundingClientRect()
    query.select('#second').boundingClientRect()
    query.select('#third').boundingClientRect()
    query.select('#scrollTop').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function(res) {
      if (nav == "1") {
        wx.pageScrollTo({
          scrollTop: res[0].top - res[4].top,
        })
      } else if (nav == "2") {
        wx.pageScrollTo({
          scrollTop: res[1].top - res[4].top,
        })
      } else if (nav == "3") {
        wx.pageScrollTo({
          scrollTop: res[2].top - res[4].top,
        })
      }
    })
  },

至此,这一功能就实现了!
此篇文章为原创文章。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页