最近模板兔在给某个客户开发小程序，其中需要一个功能就是页面滑动到某个导航时需要导航固定在页面顶部，那么如何实现呢？
我们首先需要知道这个导航距离顶部的距离，这样才能判断是否滑到了此处。
在onload的时候执行that.queryMultipleNodes();这个方法如下：
queryMultipleNodes: function (e) {
var that = this
var query = wx.createSelectorQuery()
query.select('#filters').boundingClientRect()
//query.selectViewport().scrollOffset()
query.exec(function (res) {
//console.log(res[0].top) // 节点的上边界坐标
//console.log(res[1].scrollTop) // 显示区域的竖直滚动位置
that.setData({ filterToTop: res[0].top})
})
}
然后通过onPageScorll来改变导航的class从而固定导航。
onPageScroll: function (e) {
var that = this
if (e.scrollTop >= that.data.filterToTop) {
this.setData({ isFilterFixed: true, scrollTop: e.scrollTop });
} else {
this.setData({ isFilterFixed: false, scrollTop: e.scrollTop });
}
},
0 个评论