Fxml

CreateSelectorQuery

SelectorQuery pz.createSelectorQuery()

Retornar uma instância de objeto SelectorQuery. Em um componente personalizado ou em uma página que o contém, você deve usar o this.createSelectorQuery() Responder

Return value

SelectorQuery

sample code

const query = pz.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #Upper boundary coordinates of the -id node
  res[1].scrollTop // Vertical scrolling position of display area
})

CreateInterSectionObServer

IntersectionObserver pz.createIntersectionObserver(Object component, Object options)
Cria e retorna uma instância do objeto interseectoryerver. Em um componente personalizado ou em uma página que o contém, você deve usar o this.createIntersectionObserver([options]) Para responder

parameter

Object component

Custom component instance

Object options

to make a choice

attribute	type	Default values	Required	Introductions	Mínimo
thresholds	Array.<number>	[0]	no	An array of values containing all thresholds.
initialRatio	number	0	no	The initial intersection ratio, which triggers a listener callback if the intersection ratio detected when called is not equal to this value and reaches a threshold
observeAll	boolean	false	no	Whether multiple target nodes are observed simultaneously (instead of one), if set to true ,observe of targetSelector Multiple nodes will be selected (Note: Selecting too many nodes at the same time will affect rendering performance)	2.0.0

Return value

IntersectionObserver

IntersectionObserver

IntersectionObserver Objete essas informações e qual porcentagem de nós é visível para o usuário

IntersectionObserver.relativeto

IntersectionObserver IntersectionObserver.relativeTo(string selector, Object margins) Use o seletor para especificar um nó como um dos intervalos de referência

parameter

string selector

Seletor

Object margins

Usado para estender (ou contratar) os limites da área de layout do nó de referência

attribute	type	Default values	Required	Introduções
left	number		no	Limite esquerdo da área de layout do nó
right	number		no	Limite direito da região de layout do nó
top	number		no	Limite superior da área de layout do nó
bottom	number		no	Limite inferior da área de layout do nó

Return value

IntersectionObserver

IntersectionObServer.RelativetoViewPort

IntersectionObserver IntersectionObserver.relativeToViewport(Object margins) Especifique a área de exibição da página como uma das áreas de referência

parameter

Object margins

Usado para estender (ou contratar) os limites da área de layout do nó de referência

attribute	type	Default values	Required	Introduções
left	number		no	Limite esquerdo da área de layout do nó
right	number		no	Limite direito da região de layout do nó
top	number		no	Limite superior da área de layout do nó
bottom	number		no	Limite inferior da área de layout do nó

Return value

IntersectionObserver

sample code

No código de exemplo a seguir, se o nó de destino usar o seletor .Target-Classe especifique) eter a área de exibição abaixo de 100px A função de retorno de chamada é acionada

Page({
  onLoad: function(){
    pz.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // Proportion of intersecting regions to the layout area of the target node
      res.intersectionRect // Intersecting region
      res.intersectionRect.left // Left boundary coordinates of intersecting region
      res.intersectionRect.top // Upper boundary coordinates of intersecting regions
      res.intersectionRect.width // Width of intersecting area
      res.intersectionRect.height // Height of intersection area
    })
  }
})

IntersectionObserver.observe

IntersectionObserver.observe(string targetSelector, IntersectionObserver.observeCallback callback) Especifique o nó de destino e comece a ouvir mudanças no estado da Internet

parameter

string targetSelector

Seletor

function callback

Uma função de retorno de chamada que lista para mudanças estaduais interessantes

parameter

Object res

attribute	type	Introduções
id	string	ID do nó
dataset	Record.<string, any>	Nó Propriedades de dados personalizados
intersectionRatio	number	Proponn que se cruzam
intersectionRect	Object	Limite de região interessante
boundingClientRect	Object	Limite alvo
relativeRect	Object	Limite da área de referência
time	number	Carimbo de hora para o interesse

res.intersectionRect Structure

attribute	type	Introduções
left	number	Limite esquerdo
right	number	Limite direito
top	number	Limite superior
bottom	number	Limite inferior
width	number	largura
height	number	altura

res.boundingClientRect Structure

attribute	type	Introduções
left	number	Limite esquerdo
right	number	Limite direito
top	number	Limite superior
bottom	number	Limite inferior
width	number	largura
height	number	altura

res.relativeRect Structure

attribute	type	Introduções
left	number	Limite esquerdo
right	number	Limite direito
top	number	Limite superior
bottom	number	Limite inferior

IntersectionObserver.disconnect

IntersectionObserver.disconnect() Pare de ouvir. A função de retorno de chamada não será mais acionada

Mediaquryobserver

MediaQueobserver.disconnect

MediaQueryObserver.disconnect() Pare de ouvir. A função de retorno de chamada não será mais acionada

MediaQueobserver.observe

MediaQueryObserver.observe(Object descriptor, function callback)

Comece a ouvir as alterações de consulta de mídia da página

parameter

Object descriptor

Descritor de consulta de mídia

attribute	type	Default values	Required	Introduções
minWidth	number		yes	Largura de página mínima PX em unidades)
maxWidth	number		yes	Largura máxima da página (PX em unidades)
width	number		yes	Largura da página PX em unidades)
minHeight	number		yes	Página mínima de altura px nas unidades)
maxHeight	number		yes	Altura máxima da página (px nas unidades)
height	number		yes	Altura da página (px nas unidades)
orientation	string		yes	Direção da tela ( landscape ordenado portrait .

function callback

Para monitorar a função de retorno de mudança de alteração do estado da consulta de mídia

parameter

Object res

attribute	type	Introduções
matches	boolean	O estado atual da página satisfaz a consulta de mídia especificada

SodesRef

Objeto para obter informações do nó FXML

SodesRef.BoundingClientrct

SelectorQuery NodesRef.boundingClientRect(function callback)

Adicione uma solicitação de consulta para o layout local. Em pixels relacionados à área de exibição. Sua função é Simila para a House of getBoundingClientRect Retornar. NodesRef SeletorQuery correspondente

parameter

function callback

Função de retorno de chamada, antes de executar o método SelectorQuery.exec, as informações do nó são exibidas no retorno de chamada retornando

parameter

Object res

attribute	type	Introduções
id	string	ID do nó
dataset	Object	Conjunto de dados do nó
left	number	Coordenadas de limites à esquerda dos nós
right	number	Coordenadas de limite direito do nó
top	number	Coordenadas de limites superiores dos nós
bottom	number	Coordenadas de limites inferiores dos nós
width	number	Largura do nó
height	number	Altura do nó

Return value

SelectorQuery

sample code

Page({
  getRect () {
    pz.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // Node ID
      rect.dataset // DataSet for Node
      rect.left    // Left boundary coordinates of nodes
      rect.right   // Node's right boundary coordinates
      rect.top     // Upper boundary coordinates of nodes
      rect.bottom  // Lower boundary coordinates of nodes
      rect.width   // Width of node
      rect.height  // Node height
    }).exec()
  },
  getAllRects () {
    pz.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
      rects.forEach(function(rect){
        rect.id      // Node ID
        rect.dataset // DataSet for Node
        rect.left    // Left boundary coordinates of nodes
        rect.right   // Node's right boundary coordinates
        rect.top     // Upper boundary coordinates of nodes
        rect.bottom  // Lower boundary coordinates of nodes
        rect.width   // Width of node
        rect.height  // Node height
      })
    }).exec()
  }
})

Sodesref.Context

SelectorQuery NodesRef.context(function callback)

Adicione a solicitação de consulta de objeto de contexto do nó.

parameter

function callback

Voltar para a função de retorno de chamada, seja executando SelectorQuery.exec Método, informações de retorno do nó

parameter

Object res

attribute	type	Introduções
context	Object	Nó objeto de contexto correspondente

Return value

SelectorQuery

sample code

Page({
  getContext () {
    pz.createSelectorQuery().select('.the-video-class').context(function(res){
      console.log(res.context) // Node corresponding Context Object. For example: the selected node is <video> Component, this is where we return VideoContext object
    }).exec()
  }
})

Sodesref.fields

SelectorQuery NodesRef.fields(Object fields, function callback)

Obtém informações sobre o nó. Os demitidos a buscar são especificados em disparos. O valor de retorno é nodesRef Correspondente selectorQuery

parameter

Object fields

attribute	type	Default values	Required	Introductions	Mínimo
id	boolean	false	no	Returns a node id
dataset	boolean	false	no	Returns a node dataset
mark	boolean	false	no	Returns a node mark
rect	boolean	false	no	Returns the node layout location left right top bottom ）
size	boolean	false	no	Returns the node size width height ）
scrollOffset	boolean	false	no	no Whether to return a node's scrollLeft scrollTopNode must be scroll-view or viewport
properties	Array.<string>	[]	no	Specifies a list of property names that returns the current property value of the node corresponding to the property name. class style And event - bound property values are not available
computedStyle	Array.<string>	]	no	Specifies a list of style names and returns the current value of the node corresponding to the style name	[2.1.0
context	boolean	false	no	Returns the corresponding node Context object	2.4.2
node	boolean	false	no	Returns the corresponding node Node Example	2.7.0

function callback

ligar de volta

parameter

Object res

Informações relacionadas ao nó

Return value

SelectorQuery

Be careful

O estilo computado tem uma prioridade mais alta que o tamanho, quando, no tempo AME Computedstyle Lee, largura/altura especificada e passada em tamanho: true, o retorno se encaixa no primeiro estilo computador adquirido de largura/altura adquirida

sample code

Page({
  getFields () {
    pz.createSelectorQuery().select('#the-id').fields({
      dataset: true,
      size: true,
      scrollOffset: true,
      properties: ['scrollX', 'scrollY'],
      computedStyle: ['margin', 'backgroundColor'],
      context: true,
    }, function (res) {
      res.dataset    // DataSet for Node
      res.width      // Width of node
      res.height     // Node height
      res.scrollLeft // Horizontal scrolling position of node
      res.scrollTop  // Vertical scroll position of node
      res.scrollX    // node scroll-x Property's current value
      res.scrollY    // node scroll-y Property's current value
      // Returns the specified style name to be returned here
      res.margin
      res.backgroundColor
      res.context    // Node corresponding Context object
    }).exec()
  }
})

SodesRef.scrolloffset

SelectorQuery NodesRef.scrollOffset(function callback)

Adiciona uma solicitação de consulta de posição de rolagem para o nó. Em pixels. Os nós devem ser scroll-view ordenado viewportTo Retornar o NodesRef correspondente SelectorQuery

parameter

function callback

Função de retorno de chamada, execução de serface SelectorQuery.exec Método, as informações do nó são exibidas no callback Retornar

parameter

Object res

attribute	type	Introduções
id	string	ID do nó
dataset	Object	Conjunto de dados do nó
scrollLeft	number	Posição de rolagem horizontal do nó
scrollTop	number	Posição de rolagem vertical do nó

Return value

SelectorQuery

sample code

Page({
  getScrollOffset () {
    pz.createSelectorQuery().selectViewport().scrollOffset(function(res){
      res.id      // Node ID
      res.dataset // DataSet for Node
      res.scrollLeft // Horizontal scrolling position of node
      res.scrollTop  // Vertical scroll position of node
    }).exec()
  }
})

SodesRef.Node

SelectorQuery NodesRef.node(function callback)

Obtenha a instância do nó do nó

parameter

function callback

Função de retorno de chamada, BEFace Execution SelectorQuery.Exec Método, retorna informações do nó

parameter

Object res

attribute	type	Introduções
node	Object	Nó Exemplo de nó correspondente

Return value

SelectorQuery

sample code

Page({
  getNode() {
    pz.createSelectorQuery().select('.canvas').node(function(res){
      console.log(res.node) // Node corresponding Canvas Instance
    }).exec()
  }
})

SelectorQuery

Objeto para consultar informações do nó

SelectorQuery.exec

NodesRef SelectorQuery.exec(function callback)

Execute todas as solicitações. Os resultados da solicitação formam uma matriz no pedido solicitado e são retornados no primeiro parâmetro de retorno de chamada

parameter

function callback

ligar de volta

Return value

NodesRef

SelectorQuery.in

SelectorQuery SelectorQuery.in(Component component)

Altere a seleção de um seletor para um componente de componente personalizado dentro.-nós escopos, não nós em qualquer costume component

parameter

Component component

Instância de componente personalizado

Return value

SelectorQuery

sample code

Component({
  queryMultipleNodes (){
    const query = pz.createSelectorQuery().in(this)
    query.select('#the-id').boundingClientRect(function(res){
      res.top // Inside this component #the-id Upper boundary coordinates of nodes
    }).exec()
  }
})

SelectorQuery.Select

NodesRef SelectorQuery.select(string selector)

Selecione o primeiro seletor de correspondência no nó de seletor de página atual do.

parameter

string selector

Seletor

Return value

NodesRef

selector grammar

Os seletores são semelhantes ao CSS, mas apenas a sintaxe a seguir é suportada.

• Seletor de identificação:#o-EU IA
• Seletor de classe (você pode especificar mais de um em uma linha): a-Class.Other-aula
• Seletor de elementos filhos:.-pai> .THO-criança
• Seletor de descendente :. o-Ancester-descendente
• Seletor de descendente em componentes personalizados :. o-Ancester >>> .. o-descendente
• União de vários seletores:#A-nó,. Alguns-Outro-nós

SelectorQuery.Selectall

NodesRef SelectorQuery.selectAll(string selector)

Selecione o seletor de correspondência no seletor de página atual, todos os nós do

parameter

string selector

Seletor

Return value

NodesRef

selector grammar

Os seletores são semelhantes ao CSS, mas apenas a sintaxe a seguir é suportada.

• Seletor de identificação:#o-EU IA
• Seletor de classe (você pode especificar mais de um em uma linha): a-Class.Other-aula
• Seletor de elementos filhos:.-pai> .THO-criança
• Seletor de descendente :. o-Ancester-descendente
• Seletor de descendente em componentes personalizados :. o-Ancester >>> .. o-descendente
• União de vários seletores:#A-nó,. Alguns-Outro-nós

SelectorQuery.SelectViewPort

NodesRef SelectorQuery.selectViewport()

Selecione a área de exibição. Pode ser usado para obter o tamanho da área de exibição, a posição de rolagem e outras informações.

Return value

NodesRef