小程序總結(jié)(三)- 獲取頁面的滾動高度

我們知道小程序中是沒有window、document對象的,那如何獲取頁面的滾動高度呢?

使用onPageScroll()方法,該函數(shù)有一個參數(shù)e,通過e.scrollTop可以訪問你所滾動的高度。
onPageScroll: function(e) {
    console.log(e.scrollTop)
}

當(dāng)然,上面肯定不是我的最終目的,我是想判斷頁面滾動到底部或者距離底部一小段距離的時候,

我獲取后臺的數(shù)據(jù)來加載。

方法一

參考鏈接: https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#nodesreffieldsfieldscallback
給頁面一個id,在wxml文件中的根元素上加上id="A",表示A頁面的唯一標(biāo)識。
使用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()
    }
方法二

方法一的方法,會有個問題,就是不同機型的手機哪個高度限制條件會不同,導(dǎo)致有的機型(小米)會達不到高度限制條件。所以想辦法換個方法判斷觸底。

還好文檔有個onReachBottom()方法,一下子解決了。(這個方法的問題見(小程序總結(jié)(十一))

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容