init

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

@@ -0,0 +1,59 @@
+.flex-container-x {
+  display: flex;
+  justify-content: space-around;
+}
+
+.flex-container-y {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80px;
+  height: 100px;
+  color: white;
+}
+
+.flex-container-y .flex-item {
+  width: 100px;
+  height: 80px;
+}
+
+.demo-1 {
+  background-color: rgb(255, 36, 65);
+}
+
+.demo-2 {
+  background-color: rgba(255, 36, 65, 0.7);
+}
+
+.demo-3 {
+  background-color: rgba(255, 36, 65, 0.5);
+}
+
+
+
+
+
+.flex-item-V{
+  margin: 0 auto;
+  width: 150px;
+  height: 100px;
+}
+.new-hover-class{
+  background: red;
+}
+.outer {
+  background:green;
+}
+.middle {
+  background:gray;
+}
+.inner {
+  background:yellow;
+}
+

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

@@ -0,0 +1,51 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'query',
+      path: '/api-case/query/query',
+    };
+  },
+
+  data: {
+    content: '',
+    content2: '',
+    content3: ''
+  },
+
+
+  handleGetQuery() {
+    const _this = this;
+    const query = xhs.createSelectorQuery();
+    query.select('#box').boundingClientRect();
+    query.selectViewport().scrollOffset();
+    query.exec(function(res){
+      _this.setData({
+        content: JSON.stringify(res)
+      });
+    });
+  },
+
+  handleGetQueryAll() {
+    const _this = this;
+    const query = xhs.createSelectorQuery();
+    query.selectAll('.box').boundingClientRect();
+    query.selectViewport().scrollOffset();
+    query.exec(function(res){
+      _this.setData({
+        content2: JSON.stringify(res)
+      });
+    });
+  },
+
+  selectViewport() {
+    const _this = this;
+    xhs.createSelectorQuery()
+      .selectViewport()
+      .scrollOffset(res => {
+        _this.setData({
+          content3: JSON.stringify(res)
+        });
+      }).exec();
+  }
+
+});

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

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

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

@@ -0,0 +1,58 @@
+<view class="container">
+
+  <showbox title="基础使用">
+    <box>
+      <view class="_ui-space">
+        <view class="_text_wrap">结果：{{content}}</view>
+
+        <view class="flex-container-x">
+          <view id="box" class="flex-item demo-1">A</view>
+        </view>
+
+        <button 
+          class="_ui-button" 
+          hover-class="_ui-button-hover" 
+          bindtap="handleGetQuery"
+        >
+          点击获取节点信息
+        </button>
+      </view>
+    </box>
+  </showbox>
+
+  <showbox title="选择多个节点">
+    <box pad="10px">
+      <view class="_ui-space">
+        <view class="_text_wrap">结果：{{content2}}</view>
+
+        <view class="flex-container-x">
+          <view class="box flex-item demo-1">A</view>
+          <view class="box flex-item demo-2">B</view>
+        </view>
+
+        <button 
+          class="_ui-button" 
+          hover-class="_ui-button-hover" 
+          bindtap="handleGetQueryAll"
+        >
+          点击获取所有节点信息
+        </button>
+      </view>
+    </box>
+  </showbox>
+
+  <showbox title="获得显示区域尺寸">
+    <box>
+      <view class="_ui-space">
+        <view class="_text_wrap">结果：{{content3}}</view>
+        <button 
+          class="_ui-button" 
+          hover-class="_ui-button-hover" 
+          bindtap="selectViewport"
+        >
+          点击获取
+        </button>
+      </view>
+    </box>
+  </showbox>
+</view>