都市激情校园春色,精品人妻一区二区三区四区

QML節(jié)點(diǎn)信息

節(jié)點(diǎn)信息查詢 API 可以用于獲取節(jié)點(diǎn)屬性、樣式、在界面上的位置等信息。最常見的用法是使用這個(gè)接口來(lái)查詢某個(gè)節(jié)點(diǎn)的當(dāng)前位置，以及界面的滾動(dòng)位置。

示例代碼：

const query = qq.createSelectorQuery()
query.select('#the-id').boundingClientRect(function (res) {
  res.top // #the-id 節(jié)點(diǎn)的上邊界坐標(biāo)（相對(duì)于顯示區(qū)域）
})
query.selectViewport().scrollOffset(function (res) {
  res.scrollTop // 顯示區(qū)域的豎直滾動(dòng)位置
})
query.exec()

上述示例中， #the-id 是一個(gè)節(jié)點(diǎn)選擇器，與 CSS 的選擇器相近但略有區(qū)別，請(qǐng)參見 SelectorQuery.select 的相關(guān)說(shuō)明。在自定義組件或包含自定義組件的頁(yè)面中，推薦使用 this.createSelectorQuery 來(lái)代替 qq.createSelectorQuery ，這樣可以確保在正確的范圍內(nèi)選擇節(jié)點(diǎn)。

QML節(jié)點(diǎn)布局相交狀態(tài)

節(jié)點(diǎn)布局相交狀態(tài) API 可用于監(jiān)聽兩個(gè)或多個(gè)組件節(jié)點(diǎn)在布局位置上的相交狀態(tài)。這一組API常?？梢杂糜谕茢嗄承┕?jié)點(diǎn)是否可以被用戶看見、有多大比例可以被用戶看見。這一組API涉及的主要概念如下。參照節(jié)點(diǎn)：監(jiān)聽的參照節(jié)點(diǎn)，取它的布局區(qū)域作為參照區(qū)域。如果有多個(gè)參照節(jié)點(diǎn)，則會(huì)取它們布局區(qū)域的交集作為參照區(qū)域。頁(yè)面顯示區(qū)域也可作為參照區(qū)域之一。目標(biāo)節(jié)點(diǎn)：監(jiān)聽的目標(biāo)，默認(rèn)只能是一個(gè)節(jié)點(diǎn)（使用 selectAll 選項(xiàng)時(shí)，可以同時(shí)監(jiān)聽多個(gè)節(jié)點(diǎn)）。相交區(qū)域：目標(biāo)節(jié)點(diǎn)的布局區(qū)域與參照區(qū)域的相交區(qū)域。相交比例：相交區(qū)域占參照區(qū)域的比例。閾值：相交比例如果達(dá)到閾值，則會(huì)觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。閾值可以有多個(gè)。以下示例代碼可以在目標(biāo)節(jié)點(diǎn)（用選擇器 .target-class 指定）每次進(jìn)入或離開頁(yè)面顯示區(qū)域時(shí)，觸發(fā)回調(diào)函數(shù)。

示例代碼：

Page({
  onLoad() {
    qq.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // 目標(biāo)節(jié)點(diǎn) id
      res.dataset // 目標(biāo)節(jié)點(diǎn) dataset
      res.intersectionRatio // 相交區(qū)域占目標(biāo)節(jié)點(diǎn)的布局區(qū)域的比例
      res.intersectionRect // 相交區(qū)域
      res.intersectionRect.left // 相交區(qū)域的左邊界坐標(biāo)
      res.intersectionRect.top // 相交區(qū)域的上邊界坐標(biāo)
      res.intersectionRect.width // 相交區(qū)域的寬度
      res.intersectionRect.height // 相交區(qū)域的高度
    })
  }
})

以下示例代碼可以在目標(biāo)節(jié)點(diǎn)（用選擇器 .target-class 指定）與參照節(jié)點(diǎn)（用選擇器 .relative-class 指定）在頁(yè)面顯示區(qū)域內(nèi)相交或相離，且相交或相離程度達(dá)到目標(biāo)節(jié)點(diǎn)布局區(qū)域的20%和50%時(shí)，觸發(fā)回調(diào)函數(shù)。

示例代碼：

Page({
  onLoad() {
    qq.createIntersectionObserver(this, {
      thresholds: [0.2, 0.5]
    }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
      res.intersectionRatio // 相交區(qū)域占目標(biāo)節(jié)點(diǎn)的布局區(qū)域的比例
      res.intersectionRect // 相交區(qū)域
      res.intersectionRect.left // 相交區(qū)域的左邊界坐標(biāo)
      res.intersectionRect.top // 相交區(qū)域的上邊界坐標(biāo)
      res.intersectionRect.width // 相交區(qū)域的寬度
      res.intersectionRect.height // 相交區(qū)域的高度
    })
  }
})

QML節(jié)點(diǎn)信息

節(jié)點(diǎn)信息查詢 API 可以用于獲取節(jié)點(diǎn)屬性、樣式、在界面上的位置等信息。最常見的用法是使用這個(gè)接口來(lái)查詢某個(gè)節(jié)點(diǎn)的當(dāng)前位置，以及界面的滾動(dòng)位置。示例代碼：

const query = qq.createSelectorQuery()
query.select('#the-id').boundingClientRect(function (res) {
  res.top // #the-id 節(jié)點(diǎn)的上邊界坐標(biāo)（相對(duì)于顯示區(qū)域）
})
query.selectViewport().scrollOffset(function (res) {
  res.scrollTop // 顯示區(qū)域的豎直滾動(dòng)位置
})
query.exec()

上述示例中， #the-id 是一個(gè)節(jié)點(diǎn)選擇器，與 CSS 的選擇器相近但略有區(qū)別，請(qǐng)參見 SelectorQuery.select 的相關(guān)說(shuō)明。在自定義組件或包含自定義組件的頁(yè)面中，推薦使用 this.createSelectorQuery 來(lái)代替 qq.createSelectorQuery ，這樣可以確保在正確的范圍內(nèi)選擇節(jié)點(diǎn)。

QML節(jié)點(diǎn)布局相交狀態(tài) 節(jié)點(diǎn)布局相交狀態(tài) API 可用于監(jiān)聽兩個(gè)或多個(gè)組件節(jié)點(diǎn)在布局位置上的相交狀態(tài)。這一組API常?？梢杂糜谕茢嗄承┕?jié)點(diǎn)是否可以被用戶看見、有多大比例可以被用戶看見。這一組API涉及的主要概念如下。參照節(jié)點(diǎn)：監(jiān)聽的參照節(jié)點(diǎn)，取它的布局區(qū)域作為參照區(qū)域。如果有多個(gè)參照節(jié)點(diǎn)，則會(huì)取它們布局區(qū)域的交集作為參照區(qū)域。頁(yè)面顯示區(qū)域也可作為參照區(qū)域之一。目標(biāo)節(jié)點(diǎn)：監(jiān)聽的目標(biāo)，默認(rèn)只能是一個(gè)節(jié)點(diǎn)（使用 selectAll 選項(xiàng)時(shí)，可以同時(shí)監(jiān)聽多個(gè)節(jié)點(diǎn)）。相交區(qū)域：目標(biāo)節(jié)點(diǎn)的布局區(qū)域與參照區(qū)域的相交區(qū)域。相交比例：相交區(qū)域占參照區(qū)域的比例。閾值：相交比例如果達(dá)到閾值，則會(huì)觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。閾值可以有多個(gè)。以下示例代碼可以在目標(biāo)節(jié)點(diǎn)（用選擇器 .target-class 指定）每次進(jìn)入或離開頁(yè)面顯示區(qū)域時(shí)，觸發(fā)回調(diào)函數(shù)。

Page({
  onLoad() {
    qq.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // 目標(biāo)節(jié)點(diǎn) id
      res.dataset // 目標(biāo)節(jié)點(diǎn) dataset
      res.intersectionRatio // 相交區(qū)域占目標(biāo)節(jié)點(diǎn)的布局區(qū)域的比例
      res.intersectionRect // 相交區(qū)域
      res.intersectionRect.left // 相交區(qū)域的左邊界坐標(biāo)
      res.intersectionRect.top // 相交區(qū)域的上邊界坐標(biāo)
      res.intersectionRect.width // 相交區(qū)域的寬度
      res.intersectionRect.height // 相交區(qū)域的高度
    })
  }
})

示例代碼：

Page({
  onLoad() {
    qq.createIntersectionObserver(this, {
      thresholds: [0.2, 0.5]
    }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
      res.intersectionRatio // 相交區(qū)域占目標(biāo)節(jié)點(diǎn)的布局區(qū)域的比例
      res.intersectionRect // 相交區(qū)域
      res.intersectionRect.left // 相交區(qū)域的左邊界坐標(biāo)
      res.intersectionRect.top // 相交區(qū)域的上邊界坐標(biāo)
      res.intersectionRect.width // 相交區(qū)域的寬度
      res.intersectionRect.height // 相交區(qū)域的高度
    })
  }
})

注意：與頁(yè)面顯示區(qū)域的相交區(qū)域并不準(zhǔn)確代表用戶可見的區(qū)域，因?yàn)閰⑴c計(jì)算的區(qū)域是“布局區(qū)域”，布局區(qū)域可能會(huì)在繪制時(shí)被其他節(jié)點(diǎn)裁剪隱藏（如遇祖先節(jié)點(diǎn)中 overflow 樣式為 hidden 的節(jié)點(diǎn)）或遮蓋（如遇 fixed 定位的節(jié)點(diǎn)）。在自定義組件或包含自定義組件的頁(yè)面中，推薦使用 this.createIntersectionObserver 來(lái)代替 qq.createIntersectionObserver ，這樣可以確保在正確的范圍內(nèi)選擇節(jié)點(diǎn)。)

QQ小程序 QML節(jié)點(diǎn)信息

QML節(jié)點(diǎn)信息

QML節(jié)點(diǎn)布局相交狀態(tài)

QML節(jié)點(diǎn)信息