Introduction to the use of the new drag component movable-view in the WeChat applet-Mini Program Development-php.cn

Introduction to the use of the new drag component movable-view in the WeChat applet

不言

Release： 2018-06-26 16:02:33

Original

5361 people have browsed it

This article mainly introduces you to the simple usage tutorial of movable-view, the recently added drag component of WeChat applet. The introduction in the article is very detailed and has certain reference and learning value for everyone. Friends who need it can follow it. Let’s take a look.

Preface

On the eve of the 520 holiday, the mini program made programmers restless again and updated some very attractive functions. , such as content forwarding API, iBeacon API, vibration API, screen brightness adjustment API, etc., also enhance the functions of the map component.

In this update, a new UI component is also added, which is the view component movable-view, which needs to be used together with movable-area. Simply put, it is a container that supports dragging content within a specified area.

Let’s look at 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>

Copy after login

Interface

We used movable-area to set a draggable area (red) of 200x200 size, and then placed a draggable area of 50x50 in this area Content movable-view (blue), the direction of this draggable content is set to all, which means it can be dragged in any direction.

Drag Demonstration

In a movable-area tag, you can actually place more than one movable-view. It supports placing multiple movable-views. Look at the following example:

<movable-area style="height: 200px;width: 200px;background: red;">

 <!--蓝色任意方向拖动的内容-->
 <movable-view direction="all" style="height: 50px; width: 50px; background: blue;">
 </movable-view>

 <!--黄色只能横向拖动的内容-->
 <movable-view direction="horizontal" style="height: 20px; width: 50px; background: yellow;">
 </movable-view>

</movable-area>

Copy after login

Interface 2

Drag Animation Demonstration 2

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

all - Drag in any direction
vertical - vertical drag
##horizontal - horizontal drag
none - cannot drag

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

<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>

Copy after login

This As soon as the code is run, the blue movable-view is displayed at the position of (50,50):

The above is the entire content of this article, I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat Mini Program displays json data to the Mini Program through the API interface

WeChat Mini Program City Implementation of positioning

Introduction to the use of WeChat applet button component

The above is the detailed content of Introduction to the use of the new drag component movable-view in the WeChat applet. For more information, please follow other related articles on the PHP Chinese website!