微信小程序实时监听某个元素高度

微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

wx.createSelectorQuery().select('#curr').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
}).exec()

效果图如下所示

.wxml

  
    监听内容
  

.wxss

image{
  width: 100%;
}
view{
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #f7f7f7;
}

.js

Page({
  data: {
    cure: false
  },
  onPageScroll: function (e) {
    let that = this;
    wx.createSelectorQuery().select('#curr').boundingClientRect(function (rect) {
      if(0 <= rect.top){
        that.setData({
          curr:false
        })
      }else{
        that.setData({
          curr:true
        })
      }
    }).exec()
  },
})

利用wx.createSelectorQuery来获取某个元素的属性来完成一系列操作，我这里主要是获取高度对某个元素进行定位。


有什么问题欢迎评论留言，我会及时回复你的