Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to use selectorQuery.in". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Select the node of the first matching selector selector under the current page and return an instance of the NodesRef object, which can be used to get node information.

Selector is similar to CSS's selector, but only supports the following syntax.

Class selector (multiple can be specified successively): .a-class.another-class

Child element selector: .the-parent > .the-child

Descendant selector: .the-ancestor. The-descendant

Descendant selector across custom components: .the-ancestor > .the-descendant

Union of multiple selectors: # a-node, .some-other-nodes

SelectorQuery.selectAll (selector)

Select the node that matches the selector selector under the current page and return an instance of the NodesRef object. Unlike selectorQuery.selectNode (selector), it selects all nodes that match the selector.

SelectorQuery.selectViewport ()

Select the display area, which can be used to obtain the size of the display area, scroll position and other information, and return an instance of the NodesRef object.

NodesRef.boundingClientRect ([callback])

A query request to add the layout location of the node, relative to the display area, in pixels. Its function is similar to DOM's getBoundingClientRect. The return value is the selectorQuery corresponding to nodesRef.

In the returned node information, the location of each node is described by left, right, top, bottom, width, and height fields. If the callback callback function is provided, the node information is returned in callback after executing the exec method of selectQuery.

Sample code:

Page ({getRect: function () {wx.createSelectorQuery (). Select ('# the-id') .boundingClientRect (function (rect) {rect.id / / Node's ID rect.dataset / / Node's dataset rect.left / / Node's left boundary coordinate rect.right / / Node's right boundary coordinate rect.top / / Node's upper boundary coordinate rect.bottom / / Node The lower boundary coordinate rect.width / / the width of the node rect.height / / the height of the node}) .exec ()} GetAllRects: function () {wx.createSelectorQuery (). SelectAll ('.amurclass') .boundingClientRect (function (rects) {rects.forEach (function (rect) {rect.id / / node's IDrect.dataset / / node's left boundary coordinate rect.right / / node's right boundary coordinate rect.top / / node's upper boundary coordinate rect.bottom / / the lower boundary coordinates of the node rect.width / / the width of the node rect.height / / the height of the node})}) .exec ()}}) the content of "how to use selectorQuery.in" ends here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.