小程序页面获取滚动条高度

没有用过vue等MVVM的框架，直接开始作小程序，没有dom操做真是各类不适应，思惟有时都转换不过来

想要作的效果是  很常见的滚动条超出某个元素时，该元素固定在顶部

网上看到的获取滚动条高度及返回顶部的代码

onPageScroll:function(e){ // 获取滚动条当前位置
    console.log(e)
},
goTop: function (e) {  // 一键回到顶部
 if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0
    })
  } else {
    wx.showModal({
      title: '提示',
      content: '当前微信版本太低，没法使用该功能，请升级到最新微信版本后重试。'
    })
  }
}　　

在api WXML节点信息这边能够选取节点并使用boundingClientRect方法获取元素信息

代码以下：

<view class='tab-con' id="tab-con">
    <view class="tab {{tabFixed ? 'tab-fixed':''}}">
      <view>二月</view>
      <view>三月</view>
      <view>四月</view>
    </view>
  </view>

 

js代码大概以下

Page({
  data: {
    tabScrollTop: 0,
    tabFixed: false
  },
    onReady:function(){
    var that = this;
    var query = wx.createSelectorQuery()
    query.select('#tab-con').boundingClientRect(function (res) {
      that.setData({
        tabScrollTop: res.top
      })
    }).exec()
  },
  onPageScroll: function (e) { // 获取滚动条当前位置
      if (e.scrollTop > this.data.tabScrollTop) {
        this.setData({
          tabFixed: true
        })
      }else{
        this.setData({
          tabFixed: false
        })
      }
  },
})