小程序滑动临界值固定隐藏显示导航栏

朴灿烈づ我的快乐病毒、 2021-09-19 06:34 348阅读 0赞

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()

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()
            }
        },