给元素加一个id
然后使用
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()
如果你想在页面滚动到某个元素的时候，固定导航栏，就可以使用。
如果在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) { //临界值，根据自己的需求来调整
this.setData({
fixedNav: true, //是否固定导航栏
showToTop: true //是否回到临界值的状态
})
} else {
this.setData({
fixedNav: false,
showToTop: false
})
}
}).exec()
},
//回到临界值的函数
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()
}
},