給元素加一個id
然后使用
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
rect.id // 節(jié)點的ID
rect.dataset // 節(jié)點的dataset
rect.left // 節(jié)點的左邊界坐標
rect.right // 節(jié)點的右邊界坐標
rect.top // 節(jié)點的上邊界坐標
rect.bottom // 節(jié)點的下邊界坐標
rect.width // 節(jié)點的寬度
rect.height // 節(jié)點的高度
}).exec()
如果你想在頁面滾動到某個元素的時候,固定導航欄,就可以使用。
如果在onLoad()方法里面使用,可以獲取該元素剛加載時的位置信息。
如果在OnPageScroll()方法里面使用,可以實時獲取該元素的位置信息,特別是高度,因為我們要用到,去判斷滾動到某個臨界值的時候做出一些樣式變化或者變化。
onPageScroll: function (e) {
this.setData({
scrollTop: e.scrollTop
})
let query = wx.createSelectorQuery()
query.select('#index-nav').boundingClientRect( (rect) => {
let top = rect.top
if (top <= 53) { //臨界值,根據(jù)自己的需求來調(diào)整
this.setData({
fixedNav: true, //是否固定導航欄
showToTop: true //是否回到臨界值的狀態(tài)
})
} else {
this.setData({
fixedNav: false,
showToTop: false
})
}
}).exec()
},
//回到臨界值的函數(shù)
setScrollTop() {
let query = wx.createSelectorQuery()
let scrollTop = this.data.scrollTop
query.select('#index-nav').boundingClientRect((rect) => {
let top = rect.top
// 這里是關鍵
wx.pageScrollTo({
scrollTop: scrollTop + top - 56,
duration: 0
})
}).exec()
},
//觸底加載
onReachBottom () {
if (this.data.AJAXLock && this.data.page < this.data.totalPage) {
let page = this.data.page + 1
this.setData({
page: page
})
this.getLock()
this.getHomieData()
}
},