我們知道小程序中是沒有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é)(十一))