小程序小知识（三）

参考链接：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html

小程序中如何获取界面节点信息

在微信小程序中，要获取界面上的节点信息，会用到两个API，下面会进行介绍
（1）节点信息查询API→SelectorQuery
此对象可以用于获取节点属性、样式、在界面上的位置等信息。在小程序中最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。
SelectorQuery对象的方法有以下：
①select：在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。
②selectAll：在当前页面下选择匹配选择器 selector 的所有节点。
③selectViewport：选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。
④exec：执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。
示例代码：

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

需要注意的是，在自定义组件或包含自定义组件的页面中，建议使用this.createSelectorQuery 来代替 wx.createSelectorQuery ，这样可以确保在正确的范围内选择节点。
（2）节点布局相交状态API→IntersectionObserver
此对象用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
此对象的方法有以下：
①relativeTo：使用选择器指定一个节点，作为参照区域之一
②relativeToViewport：指定页面显示区域作为参照区域之一
③observe：指定目标节点并开始监听相交状态变化情况
④disconnect：停止监听
示例代码：
.js

Page({
  data: {
    appear: false
  },
  onLoad() {
    this._observer = wx.createIntersectionObserver(this)
    this._observer
      .relativeTo('.scroll-view')
      .observe('.ball', (res) => {
        console.log(res);
        this.setData({
          appear: res.intersectionRatio > 0
        })
      })
  },
  onUnload() {
    if (this._observer) this._observer.disconnect()
  }
})

.wxml

<view class="container">
  <view class="page-body">
    <view class="page-section message">
      <text wx:if="{{appear}}">
        小球出现
      </text>
      <text wx:else>
        小球消失
      </text>
    </view>
    <view class="page-section">
      <scroll-view class="scroll-view" scroll-y>
        <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
          <text class="notice">向下滚动让小球出现</text>
          <view class="filling"></view>
          <view class="ball"></view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>