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

In this article, the editor introduces in detail "WeChat Mini Programs's method of dynamically obtaining the width and height of elements". The content is detailed, the steps are clear, and the details are handled properly. I hope that this "WeChat Mini Programs's method of dynamically obtaining the width and height of elements" can help you solve your doubts.

First, the interface returns an object instance.

Var obj=wx.createSelectorQuery ()

The returned obj has five methods:

Obj.in (component): this method has not been used before and is mostly used for component selectors.

Obj.select (selector): gets the specified node, and selector is the css selector. Returns an instance of a NodesRef object that can be used to get node information.

Obj.selectAll (selector): gets the specified node, and selector is the css selector. Returns an instance of a NodesRef object that can be used to get node information.

I think the above two are the difference between querySelector and querySelectorAll in js.

Obj.selectViewport (): I haven't used this method before. Officially, it is said that the display area is selected, which can be used to obtain information such as the size and scrolling position of the display area. It also returns an instance of the NodesRef object, which can be used to obtain node information.

Exec (function (res) {}): executes all requests, the results of which form an array in the order of requests, and are returned in the first parameter of callback

The NodesRef object instance returned above is important, which has three methods:

BoundingClientRect (function (rect) {}): this is the method that can dynamically get the height, width, and other attributes of the view element. For others, please see the official documentation.

ScrollOffset (function (res) {}): gets the horizontal and vertical scrolling position of the node, and so on. Node must be scroll-view or viewport

Fields (fields,function () {res}): this allows you to get the custom attribute and class name of the specified element, as described in the official documentation.

With so much nonsense, the real example usage:

Wx.createSelectorQuery () .selectAll ('.selectAll) .boundingClientRect (function (rect) {console.log (rect [0] .height) console.log (rect [0] .width)}) .exec () if you think this is a bit long. You can write it step by step. It's the same thing.

Var obj=wx.createSelectorQuery (); obj.selectAll ('. Npl-intro') .boundingClientRect (function (rect) {console.log (rect [0] .height) console.log (rect [0] .width)}) obj.exec (); of course, this method can be written in lifecycle methods such as onLoad, onReady, onShow, or in custom methods. Call whenever you need it.

After reading this, the article "WeChat Mini Programs's method of dynamically obtaining the width and height of elements" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, 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.