tencent cloud

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function (res) {
  res.top // The upper boundary coordinate of the #the-id node (relative to the display area)
})
query.selectViewport().scrollOffset(function (res) {
  res.scrollTop // The vertical scroll position of the display area
})
query.exec()

Page({
  onLoad() {
    wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // ID of the target node
      res.dataset // Dataset of the target node
      res.intersectionRatio // The proportion of the intersection area to the layout area of the target node
      res.intersectionRect // Intersection area
      res.intersectionRect.left // Coordinates of the left boundary of the intersection area
      res.intersectionRect.top // Coordinates of the upper boundary of the intersection area
      res.intersectionRect.width // Width of the intersection area
      res.intersectionRect.height // Height of the intersection area
    })
  }
})

Page({
  onLoad() {
    wx.createIntersectionObserver(this, {
      thresholds: [0.2, 0.5]
    }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
      res.intersectionRatio // The proportion of the intersection area to the layout area of the target node
      res.intersectionRect // Intersection area
      res.intersectionRect.left // Coordinates of the left boundary of the intersection area
      res.intersectionRect.top // Coordinates of the upper boundary of the intersection area
      res.intersectionRect.width // Width of the intersection area
      res.intersectionRect.height // Height of the intersection area
    })
  }
})

{
  "pageOrientation": "auto"
}

{
  "resizable": true
}

.my-class {
  width: 40px;
}

@media (min-width: 480px) {
  /* Style rules effective only on screens 480 px or wider */
  .my-class {
    width: 200px;
  }
}

Page({
  onResize(res) {
    res.size.windowWidth // New display area width
    res.size.windowHeight // New display area height
  }
})

Component({
  pageLifetimes: {
    resize(res) {
      res.size.windowWidth // New display area width
      res.size.windowHeight // New display area height
    }
  }
})