小程序頁面獲取滾動條高度

沒有用過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
        })
      }
  },
})