微信小程序之获取元素距离顶部距离、页面滚动监听

获取元素距离顶部距离、页面滚动监听

onReady: function () {
    var that = this;
    var query = wx.createSelectorQuery()
    query.select('.lplistbd').boundingClientRect(function (res) {
      that.setData({
        tabScrollTop: res.top + 50   //根据实际需求加减值
      })
    }).exec()
  },
  onPageScroll: function (e) { // 页面滚动监听
    if (e.scrollTop > this.data.tabScrollTop) {
      this.setData({
        tabFixed: true
      })
    } else {
      this.setData({
        tabFixed: false
      })
    }
  },

注意：1. json中是否设置了禁止页面滚动；2. 页面高度不可写100% 100vh 等；3.scroll-view中的元素获取不到 onPageScroll（）

获取页面宽高：

onLoad: function (options) {
	let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
    let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
})

其他相关链接：
微信小程序scroll-view动态获取高度（参数详细解释）：https://www.jianshu.com/p/d32871c05a23

微信小程序 导航tab切换，跟随滚动置顶：https://www.cnblogs.com/xiao-ling-zi/p/9512031.html

小程序筛选日期、时间、多选以及清空筛选：https://blog.csdn.net/qq_41874847/article/details/85004962