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()
  }
})

你可能感兴趣的:(小程序)