小程序总结(三)- 获取页面的滚动高度

我们知道小程序中是没有window、document对象的,那如何获取页面的滚动高度呢?

使用onPageScroll()方法,该函数有一个参数e,通过e.scrollTop可以访问你所滚动的高度。
onPageScroll: function(e) {
    console.log(e.scrollTop)
}

当然,上面肯定不是我的最终目的,我是想判断页面滚动到底部或者距离底部一小段距离的时候,

我获取后台的数据来加载。

方法一

参考链接: https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#nodesreffieldsfieldscallback
给页面一个id,在wxml文件中的根元素上加上id="A",表示A页面的唯一标识。
使用wx.createSelectorQuery()这个API,它返回一个SelectorQuery对象实例
然后使用SelectorQuery.select("#index")就获取到A页面了
并使用boundingClientRect等方法选择需要查询的信息(主要是获取页面A的高度)

 onPageScroll: function (e) {
        let _this = this
        wx.createSelectorQuery().select('#index').boundingClientRect(function (rect) {
            if (e.scrollTop >= rect.height - 555) {
                //已离底部一段距离,下面处理操作
            }
        }).exec()
    }
方法二

方法一的方法,会有个问题,就是不同机型的手机哪个高度限制条件会不同,导致有的机型(小米)会达不到高度限制条件。所以想办法换个方法判断触底。

还好文档有个onReachBottom()方法,一下子解决了。(这个方法的问题见(小程序总结(十一))

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容