小程序 获取页面滚动的高度

2024年5月21日 253次阅读 来源: 一天一天积累 
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()

主要使用了wx.createSelectorQuery() 来获取节点元素的信息，然后onPageScroll()来监听页面滚动
html部分：

<view class=’savePic1 { {savePic1Status}}’ bindtap=’savePic’>保存图片</view>

<view class=’savePic2′ bindtap=’savePic’>保存图片</view>

js部分：

//页面滚动一定高度隐藏浮动按钮

onPageScroll:function(e){

var query = wx.createSelectorQuery();

query.select(‘.savePic2’).boundingClientRect((rect) => {

let top = rect.top;

console.info(‘按钮距离顶部位置’, top)

if (top <= 700) { //临界值，根据自己的需求来调整

this.setData({

savePic1Status: ‘hide’, //是否固定导航栏

})

} else {

this.setData({

savePic1Status: ‘show’,

})

}

}).exec()

}

    原文作者：一天一天积累
    原文地址: https://blog.csdn.net/u012011360/article/details/90605779
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞