onPageScroll微信小程序底部悬浮框滑到底部隐藏，其他情况显示

onPageScroll

利用onpageScroll监测屏幕的位置

优点

1.有点操作简单粗暴。

缺点

2.缺点固定值不能确定的时候会有偏差。需要借助另一个 功能组件SelectorQuery

使用方法

onPageScroll:function(res){
    console.log(res)
    if (res.scrollTop < 600){
      this.setData({ reachbottom: true })
    }else{
      this.setData({ reachbottom: false })
    }
  },

这个是文档里面关于onPageScroll（因为很多人说没有找到关于onPageScroll的文档）

onPageScroll（Object object）

监听用户滑动页面事件。

参数对象：

属性	类型	说明
scrollTop的	数	页面在垂直方向已滚动的距离（单位：像素）

注意：请只在需要的时候才在页面中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层 - 逻辑层通信的影响。 注意：请避免在onPageScroll中过于频繁的执行setData等引起逻辑层-渲染层通信。的操作尤其是每次传输大量数据，会影响通信耗时。

 

表3-4页面构造器的参数

参数属性	类型	描述
数据	宾语	页面的初始数据
负载	功能	生命周期函数 - 监听页面加载，触发时机早于昂秀和onReady
onReady	功能	生命周期函数 - 监听页面初次渲染完成
展出	功能	生命周期函数 - 监听页面显示，触发事件早于onReady
onHide	功能	生命周期函数 - 监听页面隐藏
onunload的	功能	生命周期函数 - 监听页面卸载
onPullDownRefresh	功能	页面相关事件处理函数 - 监听用户下拉动作
onReachBottom	功能	页面上拉触底事件的处理函数
onShareAppMessage	功能	用户点击右上角转发
onPageScroll	功能	页面滚动触发事件的处理函数
其他	任何	可以添加任意的函数或数据，在Page实例的其他函数中用此可以访问

 页面的用户行为

小程序宿主环境提供了四个和页面相关的用户行为回调：

1. 下拉刷新onPullDownRefresh
   监听用户下拉刷新事件，需要在app.json的窗口选择中或页面配置page.json中设置enablePullDownRefresh为true。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
2. 上拉触底onReachBottom
   监听用户上拉触底事件。可以在app.json的窗口选项中或页面配置page.json中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。
3. 页面滚动onPageScroll
   监听用户滑动页面事件，参数为对象，包含scrollTop字段，表示页面在垂直方向已滚动的距离（单位px）。

4. 用户转发onShareAppMessage
   只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件需要返回一个对象，包含标题和路径两个字段，用于自定义转发内容，如代码清单3-13所示。

   码清单3-13使用onShareAppMessage自定义转发字段

5. // page.js
   Page({
   onShareAppMessage: function () {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
   }
   })

 获取元素的位置

SelectorQuery NodesRef.boundingClientRect(function callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

参数

function callback

回调函数，在执行 SelectorQuery.exec 方法后，节点信息会在 callback 中返回。

参数

Object res

属性	类型	说明	支持版本
id	string	节点的 ID
dataset	Object	节点的 dataset
left	number	节点的左边界坐标
right	number	节点的右边界坐标
top	number	节点的上边界坐标
bottom	number	节点的下边界坐标
width	number	节点的宽度
height	number	节点的高度

返回值

SelectorQuery

示例代码

Page({
  getRect () {
    wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
    }).exec()
  },
  getAllRects () {
    wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
      rects.forEach(function(rect){
        rect.id      // 节点的ID
        rect.dataset // 节点的dataset
        rect.left    // 节点的左边界坐标
        rect.right   // 节点的右边界坐标
        rect.top     // 节点的上边界坐标
        rect.bottom  // 节点的下边界坐标
        rect.width   // 节点的宽度
        rect.height  // 节点的高度
      })
    }).exec()
  }
})