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

Editor to share with you how to use the WeChat Mini Programs view container movable-area. I hope you will get something after reading this article. Let's discuss it together.

Movable-area

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

Removable area of movable-view

Note: movable-area must set the width and height attributes. If not, the default is 10px.

Movable-view

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

A removable view container that can be dragged and slid on the page

The default value of the attribute name type indicates the moving direction of the directionStringnonemovable-view. Whether the attribute values include all, vertical, horizontal, and noneinertiaBooleanfalsemovable-view have inertia. After the out-of-boundsBooleanfalse exceeds the movable region, whether the movable-view can still move the xNumber to define the offset of the x axis. If the value of x is not within the movable range, it will automatically move to the movable range. Changing the value of x will trigger the animation yNumber to define the offset of the y axis, and if the value of y is not within the movable range, it will automatically move to the movable range; changing the value of y will trigger the animation dampingNumber20 damping coefficient, which is used to control the animation when x or y is changed and the animation of cross-boundary springback. The larger the value, the faster the frictionNumber2 friction coefficient, which is used to control the animation of inertial sliding. The higher the value, the greater the friction, the faster the sliding stops. Must be greater than 0, otherwise it will be set to the default value

Movable-view must set the width and height attributes. If not, the default is 10px.

Movable-view defaults to absolute positioning, and top and left attributes are 0px

When movable-view is less than movable-area, the moving range of movable-view is within movable-area; when movable-view is greater than movable-area, the moving range of movable-view must include movable-area (the x-axis direction and y-axis direction are considered separately)

Note: the movable-view must be in the component and must be a direct child node, otherwise it cannot be moved.

Sample code:

Movable-view region is smaller than movable-area click me to move to (30px, 30px) movable-view region is larger than movable-area Page ({data: {x: 0, y: 0}, tap: function (e) {this.setData ({x: 30, y: 30})) }}) after reading this article, I believe you have some understanding of "how to use WeChat Mini Programs View Container movable-area". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.