init

xhs-mini-demos/api-case/observer/observer.css

@@ -0,0 +1,51 @@
+.wrap {
+  padding-top: 30rpx;
+}
+
+.scroll-view {
+  height: 400rpx;
+  background: #fff;
+}
+
+.scroll-area {
+  height: 1900rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: .5s;
+}
+
+.notice {
+  margin-top: 150rpx;
+}
+
+.ball {
+  width: 100rpx;
+  height: 100rpx;
+  background: #38f;
+  border-radius: 50%;
+}
+
+.ball2 {
+  width: 100rpx;
+  height: 100rpx;
+  background: #38f;
+  border-radius: 50%;
+  margin-top: 500rpx;
+}
+
+.filling {
+  height: 400rpx;
+}
+
+.message {
+  margin: 50rpx 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.message text {
+  font-size: 40rpx;
+  font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
+}

xhs-mini-demos/api-case/observer/observer.js

@@ -0,0 +1,44 @@
+
+Page({
+  data: {
+    appear: false,
+    appear2: false
+  },
+  onReady() {
+    this.intersectionObserver = xhs.createIntersectionObserver(this);
+    // 监测 scroll-view 可视区域和小球元素节点的相交情况
+    console.log('swan.createIntersectionObserve的可选值', this.intersectionObserver._options);
+    this.intersectionObserver
+      .relativeTo('.scroll-view1')
+      .observe('.ball', res => {
+        console.log('observe', res);
+        // boundingClientRect: 目标边界，这里指小球的位置情况，这个位置是相对于整个页面的，不是相对于参照元素的 scroll-view 的
+        // dataset: 观察对象携带的数据。
+        // id: 观察对象的 id，它与上面的 dataset 多使用于一次观察多个对象的场景，用于区分不同的对象。
+        // intersectionRatio: 相交比例，为 0 时说明两者不相交。
+        // intersectionRect: 相交区域，height 为 0 时说明此时没有相交。
+        // relativeRect: 参照区域的边界，作为参考物，它的值一般是不会变的。可以对比它于开始相交时一直没变，因为它就是一个 scroll-view 的组件在页面上呈现出的位置信息。
+        // time: 监测到两者相交时的时间戳
+        this.setData('appear', res.intersectionRatio > 0);
+      });
+
+    this.intersectionObserver2 = xhs.createIntersectionObserver(this, {
+      selectAll: true
+    });
+    this.intersectionObserver2
+      .relativeTo('.scroll-view2')
+      .observe('.ball1, .ball2', res => {
+        console.log('observe2', res);
+        this.setData('appear2', res.intersectionRatio > 0);
+      });
+  },
+  onUnload() {
+    this.intersectionObserver && this.intersectionObserver.disconnect();
+    this.intersectionObserver2 && this.intersectionObserver2.disconnect();
+      
+  }
+});
+
+
+
+

xhs-mini-demos/api-case/observer/observer.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "监听节点",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

xhs-mini-demos/api-case/observer/observer.xhsml

@@ -0,0 +1,33 @@
+<view class="container">
+  <view class="wrap">
+    <view class="message">
+        <text xhs:if="{{appear}}">小球出现</text>
+        <text xhs:else>小球消失</text>
+    </view>
+    <scroll-view class="scroll-view scroll-view1" 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 class="wrap">
+    <view class="message">
+        <text xhs:if="{{appear2}}">小球出现</text>
+        <text xhs:else>小球消失</text>
+    </view>
+    <scroll-view class="scroll-view scroll-view2" scroll-y>
+        <view class="scroll-area" style="{{appear2 ? 'background: #ccc' : ''}}">
+            <text class="notice">向下滚动让小球出现</text>
+            <!-- 占位元素 -->
+            <view class="filling"></view> 
+            <!-- 小球 -->
+            <view class="ball ball1"></view>
+            <view class="ball2"></view>
+        </view>
+    </scroll-view>
+</view>
+
+</view>