ノードは、画面上の情報を得ます

WXMLノード情報

ノード情報のクエリAPIは、界面でのノード、スタイル、位置などの属性情報を取得するように構成することができます。

最も一般的な方法は、ノードの現在の位置を照会するために、このインターフェイスを使用して、インタフェースの位置をスクロールすることです。

サンプルコード：

CONSTクエリ= wx.createSelectorQuery（）
クエリ。SELECT（' ＃-ID ' ）.boundingClientRect（関数（RES）を{ 
  res.top // ＃表示領域に対する境界座標上のノードID（）
}）
クエリ.selectViewport（）。scrollOffset（関数（RES）{ 
  res.scrollTopは// 垂直スクロールエリアの位置を表示
}）
query.exec（）

上記の例では、 #the-id CSSセレクタに似ているがわずかに異なるノードセレクタは、参照 SelectorQuery.select の命令を。

カスタムコンポーネントまたはコンポーネントのカスタムページを含む推奨される this.createSelectorQuery 代わり wx.createSelectorQuery 、これが正しい範囲内のノードことを確実にします。

WXMLノードレイアウト交差状態

ノードAPIレイアウト交差状態は配置位置のノードの状態の2つの以上の構成要素の交差を監視するために使用することができます。このグループは、APIは、いくつかのノードは、ユーザーが見られることがあり、多くの場合であるかどうかを推測するために使用することができ、それがユーザーのどれだけを見ることができます。

次のように関係するAPIのセットの主な概念があります。

ノードを参照する：そのレイアウト面積を基準面積とし、基準ノードをリッスンします。基準ノードの複数の場合は、レイアウト領域取る 交差点を基準領域として。ページ表示領域は、基準領域の1つとして使用されてもよいです。
ノードをターゲット：デフォルトでは、一つのノードのみである（使用して、ターゲットをリッスン selectAll オプションを使用すると、同時に複数のノード上で聴くことができます）。
交差領域：ターゲット・ノードの参照領域のレイアウト面積との交差の領域。
交差率：基準領域の交差領域の割合。
しきい値：しきい値に達した場合の割合の交点が、それはリスナーのコールバック関数をトリガします。閾値は、複数であってもよいです。

以下のサンプルコードは、ターゲット・ノード（のために選択することができる .target-class たびに指定されたページ表示領域に入るまたは離れる）、トリガーコールバック関数。

サンプルコード：

ページ（{ 
  のonLoad：関数（）{ 
    wx.createIntersectionObserver（）relativeToViewport（）観察（.. ' .TARGETクラス'、（RES）=> { 
      res.id // ターゲットノードID 
      res.dataset // ターゲットノードセット 
      res.intersectionRatio // ターゲットノード領域の交差レイアウト面積の割合 
      res.intersectionRect // 交差領域 
      res.intersectionRect.left // 左境界領域の交点座標 
      res.intersectionRect.top // 交点が境界領域上の座標 
      RES。 intersectionRect.width // 交差領域の幅 
      res.intersectionRect.height //は、領域の高さと交差します
    }）
  } 
}）

（ターゲット・ノードで選択して、次のサンプルコード .target-class 基準ノードと指定された）（セレクタでは、 .relative-class 交差領域またはから離れ、そして、20％程度とページ表示の対象ノードレイアウト面積の50％から離れて交差する場合、または指定されました）、コールバック関数をトリガします。

サンプルコード：

ページ（{ 
  のonLoad：関数（）{ 
    wx.createIntersectionObserver（この、{ 
      しきい値：[ 0.2、0.5 ] 
    }）relativeToで（' .relativeクラス'）.RelativeToViewport（）（観察' .TARGETクラス'（、 RES）=> { 
      res.intersectionRatioは// ターゲットノード領域の交差レイアウト面積の割合 
      res.intersectionRect // 交差領域 
      res.intersectionRect.left // 左境界領域の交点座標 
      res.intersectionRect.top // 交差領域境界座標 
      res.intersectionRect.widthを//交差領域の幅 
      res.intersectionRect.height // 交差領域の高さを
    }）
  } 
}）

注：ページ表示領域の交差領域がユーザ可視領域の正確な表現ではない領域を「レイアウト領域」の計算に関与しているので、レイアウト面積が隠れたカット内の他のノードによって描くことができる（のオーバーフロー先祖ノードスタイルの場合隠されたノード）またはカバー（固定位置ノードの場合）。

カスタムコンポーネントまたはコンポーネントのカスタムページが推奨される含む this.createIntersectionObserver 代わり wx.createIntersectionObserver 、これが正しい範囲内のノードことを確実にします。

。

アプレットフレームワークは〜ビュー層インターフェースノード情報の閲覧を取得します

ノードは、画面上の情報を得ます

WXMLノード情報

WXMLノードレイアウト交差状態

おすすめ