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

Editor to share with you WeChat Mini Programs how to get the node, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Wx.createSelectorQuery ()

The basic library 1.4.0 is supported, and the lower version needs to be compatible.

Returns an instance of a SelectorQuery object. You can use methods such as select to select nodes on this instance, and methods such as boundingClientRect to select the information you need to query.

Sample code:

Page ({queryMultipleNodes: function () {var query = wx.createSelectorQuery () query.select ('# the-id'). BoundingClientRect () query.selectViewport (). ScrollOffset () query.exec (function (res) {res [0] .top / / # the-id node upper boundary coordinates res [1] .scrollTop / / display area vertical scroll position}) selectorQuery

List of methods for the selectorQuery object:

Method parameter description selectselector reference below detailed introduction selectAllselector reference below detailed introduction selectViewport reference below detailed introduction exec [callback] reference below detailed introduction selectorQuery.select (selector)

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.

ID selector: # the-id

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

Child element selector: .the-parent > # the-child.a-class

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 / / Lower boundary coordinates of the node rect.width / / width of the node rect.height / / height of the node})}) .exec ()}}) nodesRef.scrollOffset ([callback])

Add the scrolling position query request for the node, in pixels. The node must be scroll-view or viewport. The return value is the selectorQuery corresponding to nodesRef.

In the returned node information, the scrolling position of each node is described by scrollLeft and scrollHeight 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 ({getScrollOffset: function () {wx.createSelectorQuery () .selectViewport () .scrollOffset (function (res) {res.id / / Node's ID res.dataset / / Node's dataset res.scrollLeft / / Node's horizontal scrolling position res.scrollTop / / Node's vertical scrolling position}) .exec ()}) nodesRef.fields (fields, [callback])

To get the relevant information about the node, the fields to be obtained are specified in the fields. The return value is the selectorQuery corresponding to nodesRef. The fields that can be specified to get are:

The default value of the field name indicates whether the id returns the node iddataset No whether the node datasetrect returns the node layout location (left right top bottom) size whether the node size (width height) scrollOffset returns the scrollLeft scrollTop of the node, the node must be a scroll-view or viewportproperties [] specified attribute name list, and the current attribute value of the corresponding attribute name of the node is returned (only the general attribute values indicated in the component document can be obtained Property values of id class style and event bindings are not available)

Sample code:

Page ({getFields: function () {wx.createSelectorQuery (). Select ('# the-id'). Fields ({dataset: true, size: true, scrollOffset: true, properties: ['scrollX',' scrollY']]} Function (res) {res.dataset / / Node dataset res.width / / Node width res.height / / Node height res.scrollLeft / / Node horizontal scrolling position res.scrollTop / / Node vertical scrolling position res.scrollX / / Node scroll-x attribute current value res.scrollY / / Node scroll-x attribute Value}) .exec ()}}) selectorQuery.exec ([callback])

All requests are executed, and the results of the requests are organized into an array in the order of the requests, which is returned in the first parameter of the callback.

The above is all the contents of the article "how to get nodes by WeChat Mini Programs". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.