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

没有用过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方法获取元素信息

代码如下：

二月

三月

四月

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

})

}

},

})