小程序获取当前组件位置

为了实现小程序端滚动时，执行某段代码，Sham今天学习了下，以下代码作为备忘：

Page({
//声明节点查询的方法
  onPageScroll: function () {
    var that = this;
    const query = wx.createSelectorQuery()                // 创建节点查询器 query
    query.select('#toshowbanner').boundingClientRect()    // 这段代码的意思是选择Id=toshowbanner的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset()                 // 这段代码的意思是获取页面滑动位置的查询请求
    query.exec((res) => {
      //console.log(res[0])  //打印可以看到当前位置对于上下左右的距离
      if (res[0].top < 100) {  //当id为toshowbanner的组件距离顶部小于100时，执行代码
        that.setData({
          showtypes: true
        })
      } else {
        that.setData({
          showtypes: false,
        })
      }
    })
  },
})

以上是js代码，然后在wxml中给需要定位的组件加个id=”toshowbanner”就可以了。

这个可以实现比如向下划到某个位置时，显示悬浮在底部的多功能按钮，或者scroll-view组件滑动到某个位置执行什么操作，再加上个动画效果，还是不错的功能。