Wechat applet: movable view

Time:2022-5-4

Normally, after an element is created, it cannot be moved without JS or CSS animation. Wechat applet adds movable view component to realize it. Movable view component can complete the movement of elements, but the container must be placed inmovable-areaIn order to move, in fact, these two components can be used together to achieve the effect of moving.

1. Basic use of movable view

1.1. Wxml Code:

directionIs the moving direction of the movable view. The default attribute value is none. The attribute values include all, vertical, horizontal, etc,inertiaIs whether the movable view has inertia, that is, whether it will slide a short section in the direction before the cancellation after the drag event is cancelled,out-of-boundsIt refers to whether the movable view can still move when the dragged element exceeds the moving area.
movable-areaIt means when it’s insidemovable-viewWhen it is set to support two finger zoom, setting this value can modify the effective area of zoom gesture to the whole areamovable-area

<movable-area scale-area>
  <movable-view direction="all" inertia out-of-bounds >
  </movable-view>
</movable-area>
1.2 wxss Code:
.area {
  width: 100%;
  height: 200px;
  margin-top: 100px;
  overflow: hidden;
  background: bisque;
}
.view {
  width: 50px;
  height: 50px;
  background: blueviolet;
}
Wechat applet: movable view

Drag gif

2. Setting damping damping coefficient in movable view

dampingIt refers to the animation used to control the change of X or Y and the springback beyond the boundary during the movement. The higher the value, the faster the movement

2.1. Wxml Code:
<movable-area scale-area>
  <movable-view damping="10" direction="all" x="{{x}}" y="{{y}}" inertia out-of-bounds >
  </movable-view>
</movable-area>
< button bind: tap = "OnTap" > click Move < / button >
2.2 wxss Code:
.area {
  width: 100%;
  height: 200px;
  margin-top: 100px;
  overflow: hidden;
  background: bisque;
}
.view {
  width: 50px;
  height: 50px;
  background: blueviolet;
}
2.3. JS events
  onTap:function(){
    this.setData({
      x:100,
      y:200
    })
  },

Damping is 10:

Wechat applet: movable view

Damping is 10 gif

Damping is 200:

Wechat applet: movable view

Damping is 200 gif

3. Friction coefficient setting and double finger scaling in movable view

3.1. Set friction coefficient wxml Code:

frictionIs the friction coefficient, which is used to control the animation of inertial sliding. The greater the value, the greater the friction, and the faster the slider stops. The default value is 2.

<movable-area scale-area>
  <movable-view friction="10" damping="20" direction="all" x="{{x}}" y="{{y}}" inertia out-of-bounds >
  </movable-view>
</movable-area>
< button bind: tap = "OnTap" > click Move < / button >
3.2. Wxml code of double finger scaling:

scaleIt refers to whether double finger scaling is supported. The default scaling gesture is controlled in the movable view area, unless the scale area attribute is set in the area,scale-minIs the minimum value that defines the zoom factor,scale-maxIs the maximum value that defines the zoom factor,scale-valueDefine the scaling multiple, and the value range is 0.5 ~ 10

<movable-area scale-area>
  <movable-view friction="10" scale scale-value="2" damping="20" direction="all" x="{{x}}" y="{{y}}" inertia out-of-bounds >
  </movable-view>
</movable-area>
< button bind: tap = "OnTap" > click Move < / button >

4. Precautions for sliding events of movable view

htouchmoveThis event will be triggered when the finger touch movement is horizontal at the beginning. This means that the initial direction is horizontal. Once the initial direction is not horizontal, it is caught.
vtouchmoveThis event will be triggered when the direction of finger touch movement is vertical at the beginning.

4.1 wxml code
<movable-area scale-area>
  <movable-view bind:change="onHTouchMove" friction="10" damping="20" direction="all" x="{{x}}" y="{{y}}" inertia out-of-bounds >
  </movable-view>
</movable-area>
4.2 wxss code
.view {
  width: 50px;
  height: 50px;
  background: blueviolet;
}

.overview {
  width: 50px;
  height: 50px;
  background: chartreuse;
}
4.3. JS events

When the lateral movement is greater than 50px, the style modification is triggered

  onLoad: function (options) {
    this.setData({
      view:'view'
    })
  },
  onHTouchMove:function(event){
    var x = event.detail.x;
    if(x > 50){
      this.setData({
        view:'overview'
      })
    }
  },
Wechat applet: movable view

The htouchmove event is triggered gif

The same is true for vertical events. This kind of event is generally used for sliding deletion. You can try it during holidays

5. Attention to movable view!

movable-viewThe width and height attributes must be set. If not set, the default value is 10px, followed bymovable-viewThe default is absolute positioning. The top and left attributes are initially 0px. Whenmovable-viewless thanmovable-areaWhen,movable-viewThe range of movement ismovable-areaInside.
movable-viewMust be<movable-area />It must be a direct child node, or it cannot be moved