WeChat applet's new drag component movable-view tutorial, WeChat applet view drag

The drag component movable-view added by the applet is used as a tutorial.

Preface

On the eve of the 520 holiday, the mini-program stirred up programmers and updated some attractive features, such as the content forwarding API, iBeacon API, vibration API, and screen brightness adjustment API, it also enhances the functions of the map component.

In this update, a UI component is also added, that is, the view component movable-view, which must be used together with movable-area. In short, it is a container that supports content dragging in a specified area.

Let's take a simple example:

<movable-area style="height: 200px;width: 200px;background: red;"> <movable-view direction="all" style="height: 50px; width: 50px; background: blue;"> </movable-view></movable-area>

Interface

We use movable-area to set a drag area (red) of X ), then, a 50x50 movable-view (blue) can be placed in this area. The direction of the dragged content is set to all, which indicates that it can be dragged up in any way.

Drag demonstration

In a movable-area label, you can put more than one movable-view. It supports multiple movable-views. See the following example:

<Movable-area style = "height: 200px; width: 200px; background: red;"> <! -- Content dragged in any direction in blue --> <movable-view direction = "all" style = "height: 50px; width: 50px; background: blue; "> </movable-view> <! -- Content that can only be dragged horizontally in yellow --> <movable-view direction = "horizontal" style = "height: 20px; width: 50px; background: yellow; "> </movable-view> </movable-area>

Interface 2

Drag demonstration 2

The direction attribute of movable-view supports the following four values:

• All-drag in any direction
• Vertical-vertical drag
• Horizontal-horizontal drag
• None-cannot be dragged
  

The first three values are easy to understand. If direction is set to the last none, you can locate it in movable-area only by setting the x and y attribute values:

<movable-area style="height: 200px;width: 200px;background: red;"> <movable-view direction="none" x="50" y="50" style="height: 50px; width: 50px; background: blue;"> </movable-view></movable-area>

When this code is run, the blue movable-view is displayed at the position (50, 50:

Summary

Well, the drag component function of the applet will be briefly introduced in this way. I hope the content of this article will help you in your study or work, if you have any questions, you can leave a message. Thank you for your support for the customer's house.