feat: 添加 获取WXML节点信息 和 WXML节点布局相交状态 页面

app.json

@@ -55,7 +55,9 @@
     "pages/API/menu-info/menu-info",
     "pages/API/get-location/get-location",
     "pages/API/choose-location/choose-location",
-    "pages/API/canvas/canvas"
+    "pages/API/canvas/canvas",
+    "pages/API/get-wxml-node-info/get-wxml-node-info",
+    "pages/API/intersection-observer/intersection-observer"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/API/canvas/canvas.wxml

@@ -3,9 +3,9 @@
 
 <view class="container">
   <template is="head" data="{{title: 'createContext'}}"/>
-  <view>本demo使用官方文档中的CanvasContext写法</view>
+  <view>本demo使用官方文档中的CanvasContext的调用方式</view>
   <view>在微信基础库中可以运行</view>
-  <view>在凡泰基础库中不可运行</view>
+  <view>在凡泰基础库中运行无效</view>
   <view class="page-body">
     <view class="page-section">
       <canvas class="canvas-element" canvas-id="canvas"></canvas>

pages/API/get-wxml-node-info/get-wxml-node-info.js

@@ -0,0 +1,39 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: '获取WXML节点信息',
+      path: 'packageAPI/pages/get-wxml-node-info/get-wxml-node-info'
+    }
+  },
+
+  data: {
+    metrics: []
+  },
+
+  onReady() {
+    this.getNodeInfo()
+  },
+
+  getNodeInfo() {
+    const $ = wx.createSelectorQuery()
+    const target = $.select('.target')
+    target.boundingClientRect()
+
+    $.exec((res) => {
+      const rect = res[0]
+      if (rect) {
+        const metrics = []
+        // eslint-disable-next-line
+        for (const key in rect) {
+          if (key !== 'id' && key !== 'dataset') {
+            const val = rect[key]
+            metrics.push({key, val})
+          }
+        }
+
+        this.setData({metrics})
+      }
+    })
+  }
+
+})

pages/API/get-wxml-node-info/get-wxml-node-info.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "获取WXML节点信息"
+}

pages/API/get-wxml-node-info/get-wxml-node-info.wxml

@@ -0,0 +1,25 @@
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'createSelectorQuery'}}"/>
+
+  <view class="page-body">
+    <view class="page-section">
+        <view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="getNodeInfo">
+          Box
+        </view>
+    </view>
+
+    <view class="page-section">
+      <view class="metric">
+        <view wx:for="{{ metrics }}" wx:key="{{item.key}}">
+          <text class="b">{{ item.key }}</text>
+          <text class="span">{{ item.val }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>

pages/API/get-wxml-node-info/get-wxml-node-info.wxss

@@ -0,0 +1,46 @@
+movable-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  width: 50px;
+  background: #1AAD19;
+  color: #fff;  
+}
+
+movable-area {
+  height: 200px;
+  width: 200px;
+  background-color: #ccc;
+  overflow: hidden;
+}
+
+.page-section {
+  display: flex;
+  justify-content: center;
+}
+
+.page-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.metric {
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  flex-direction:column;
+  align-items:center;
+}
+
+.b {
+  display: inline-block;
+  width: 75px;
+  font-weight: bold;
+}
+
+.span {
+  display: inline-block;
+  width: 50px;
+}

pages/API/index/index.js

@@ -66,6 +66,14 @@ Page({
             zh: '菜单位置信息',
             url: 'menu-info/menu-info'
           },
+          {
+            zh: '获取WXML节点信息',
+            url: 'get-wxml-node-info/get-wxml-node-info'
+          },
+          {
+            zh: 'WXML节点布局相交状态',
+            url: 'intersection-observer/intersection-observer'
+          },
         ]
       }, {
         id: 'device',

pages/API/intersection-observer/intersection-observer.js

@@ -0,0 +1,26 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'WXML节点布局相交状态',
+      path: 'packageAPI/pages/intersection-observer/intersection-observer'
+    }
+  },
+
+  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()
+  }
+})

pages/API/intersection-observer/intersection-observer.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "WXML节点布局相交状态"
+}

pages/API/intersection-observer/intersection-observer.wxml

@@ -0,0 +1,28 @@
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'intersectionObserver'}}"/>
+
+  <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>
+
+  <template is="foot" />
+</view>

pages/API/intersection-observer/intersection-observer.wxss

@@ -0,0 +1,38 @@
+.scroll-view {
+  height: 200px;
+  background: var(--weui-BG-2);
+}
+
+.scroll-area {
+  height: 1150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: .5s;
+}
+
+.notice {
+  margin-top: 75px;
+}
+
+.ball {
+  width: 100px;
+  height: 100px;
+  background: #1AAD19;
+  border-radius: 50%;
+}
+
+.filling {
+  height: 200px;
+}
+
+.message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.message text {
+  font-size: 20px;
+  font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
+}