tencent cloud

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

Page({
  onLoad() {
    wx.createIntersectionObserver().rela
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // the ratio of the intersection region to the layout region of the target node
      res.intersectionRect // intersection region
      res.intersectionRect.left // coordinates of the left boundary of the intersection region
      res.intersectionRect.top // the upper boundary of the intersection region
      res.intersectionRect.width // width of the intersection region
      res.intersectionRect.height // height of the intersection region
    })
  }
})

  Page({
  getFields () {
    wx.createSelectorQuery().select('#the-id').fields({
      dataset: true,
      size: true,
      scrollOffset: true,
      properties: ['scrollX', 'scrollY'],
      computedStyle: ['margin', 'backgroundColor'],
      context: true, }, function (res) { {
    }, function (res) {
      res.dataset // the node's dataset
      res.width // width of the node
      res.height // the height of the node
      res.scrollLeft // The horizontal scroll position of the node.
      res.scrollTop // The vertical scroll position of the node.
      res.scrollX // The current value of the node's scroll-x property.
      res.scrollY // The current value of the node's scroll-y property.
      // This returns the name of the style to be returned.
      res.margin
      res.backgroundColor
      res.context // The node's corresponding Context object.
      res.ref // The Ref object for the node.
    res.ref // Ref object for the node }).exec()
  }
})  

Page({
  getRect() {
    wx.createSelectorQuery().select('#the-id').boundingClientRect(function (rect) {
      rect.id // Node's ID
      rect.dataset // Node's dataset
      rect.left // Node's left boundary coordinate
      rect.right // Node's right boundary coordinate
      rect.top // Node's upper boundary coordinate
      rect.bottom // Node's lower boundary coordinate
      rect.width // Node's width
      rect.height // Node's height
    }).exec()
  },
  getAllRects() {
    wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function (rects) {
      rects.forEach(function (rect) {
        rect.id // Node's ID
        rect.dataset // Node's dataset
        rect.left // Node's left boundary coordinate
        rect.right // Node's right boundary coordinate
        rect.top // Node's upper boundary coordinate
        rect.bottom // Node's lower boundary coordinate
        rect.width // Node's width
        rect.height // Node's height
      })
    }).exec()
  }
})

Page({
  getScrollOffset() {
    wx.createSelectorQuery().selectViewport().scrollOffset(function (res) {
      res.id // Node's ID
      res.dataset // Node's dataset
      res.scrollLeft // Node's horizontal scroll position
      res.scrollTop // Node's vertical scroll position
    }).exec()
  }
})

Page({
  getContext() {
    wx.createSelectorQuery().select('.the-video-class').context(function (res) {
      console.log(res.context) // Context object corresponding to the node. For instance, if the selected node is a <map> component, then a MapContext object is returned here.
    }).exec()
  }
})

Page({
  getNode() {
    wx.createSelectorQuery().select('.canvas').node(function(res){
      console.log(res.node) // Canvas instance corresponding to the node.
    }).exec()
  }
})

Component({
  queryMultipleNodes() {
    const query = wx.createSelectorQuery().in(this)
    query.select('#the-id').boundingClientRect(function (res) {
      res.top // The upper boundary coordinate of the #the-id node within this component.
    }).exec()
  }
})