Illustration and text demonstrate the movable range of the applet movable view

High quality resource sharing

Learning route guidance （ Click unlock ）	Knowledge orientation	Crowd positioning
🧡 Python Actual wechat ordering applet 🧡	Progressive class	This course is python flask+ Perfect combination of wechat applet , From the deployment of Tencent to the launch of the project , Create a full stack ordering system .
Python Quantitative trading practice	beginner	Take you hand in hand to create an easy to expand 、 More secure 、 More efficient quantitative trading system

Preface

Students who have developed small programs may not be unfamiliar with these two built-in components , They are used together to realize dragging and sliding in the page , among ：

• movable-area Represents the movable area of the element , It determines the range of areas where elements move
• movable-view Represents a movable view container , It determines what elements can move

Requirements for use movable-view Must be movable-area Direct child of , Otherwise you can't move .

These two components can easily meet the requirements of more conventional drag and drop mobile products , But for some slightly complex requirements , You may need to further master and understand their usage principles .

Reunderstanding movable-area and movable-view

On the official website of wechat applet movable-area when , There was such a hint ：

1. tip: When movable-view Less than movable-area when ,movable-view The range of motion of is movable-area Inside ;
2. tip: When movable-view Greater than movable-area when ,movable-view The movement range of must include movable-area（x Axis direction and y The axis direction is considered separately ）

The size comparison of the above two components is based on their respective sizes , That is, the area corresponding to the rectangle .

In fact, the description of the relationship between the two on the official website is not too detailed , There are many situations that need to be distinguished ; I have made different attempts in the project , The following is a summary of the different situations , If there is something wrong, please correct it .

movable-area and movable-view One party of completely includes the other party

in the light of movable-area and movable-view The size of one side can completely cover the size of the other side , Its moving range is relatively easy to understand .

For example, the figure below shows movable-view The size of completely covers movable-area Zone time ,movable-view Demonstration diagram of the movable range of ：

movable-view No matter how you move, you should completely cover movable-area, in other words movable-area Can't go beyond movable-view The scope of the area ; vice versa .

Have you ever thought about it , If not, one party can completely include the other , That is, when the two regions intersect ,movable-view How does the mobile range of the show ？

movable-area And movable-view Area intersection

The so-called regional intersection , It refers to when one party cannot completely cover the other , The two areas overlap ; In view of this situation, its performance is different , At this time movable-view The moving range of should aim at x Axis direction and y Axis direction Consider separately .

In conclusion ：

When the two intersect , No look movable-area And movable-view Who is the bigger and who is the smaller , But look at movable-view The direction with the largest value of width and height .

for instance ：movable-view Of width Compared with height Big , Because its heel movable-area Area intersection , Then the maximum moving range in two different directions shows ：

• horizontal direction ：movable-view Of width To fully include movable-area Of width
• vertical direction ： movable-view Of height To be movable-area Contains overrides

The following mobile demo ：

movable-area The size of the area is 0, and movable-view Not for 0

movable-view The area of is larger than 0, and movable-area The area of is 0 What kind of performance will it have in the process of moving ？

First , look down movable-area The area is 0 Two forms of ：

• movable-area Component's width and height All for 0
• movable-area Component's width and height Only one of them is 0

So in both cases ,movable-view What is the moving range of , Think for a few seconds .

Actually , in the light of movable-area The width and height of the bridge are 0 The situation of , You can imagine the black square in the above figure as a size 0 A point of , It's just that it won't be displayed on the interface , But its position is still in the corresponding position , that movable-view Is to move around the position of the invisible point , Don't go beyond this range , As shown in the figure below , For the convenience of display, the position of this point is indicated by a red dot .

in the light of movable-area Of width and height Any one is 0 The situation of , Both are 0 Imagine it as a point. The main difference is , Can be movable-area Imagine it as an invisible straight line , It will not be displayed in the interface , But it decides movable-view Moving range , We use width by 0,height Not for 0 To illustrate movable-view Moving range of , As shown in the following figure ：

movable-area And movable-view The area size is 0

First of all, I will explain before this section ：

• moable-view by 0 Doesn't mean you can't move , For example, its child elements have dimensions , Can still move
• In both areas 0 Under the circumstances , The page will not display the corresponding elements , The following figure will be drawn for demonstration purposes to show its position on the page

movable-area perhaps movable-view The area is 0 The situation of , There are two situations ： Or element width and height All for 0, Or the two are different at the same time 0.

Let's introduce movable-view In its width and height Different at the same time 0 Under the circumstances （ Also for 0 There will be no moving elements ） Moving range of , Under this premise, we should distinguish movable-area The area is 0 The situation of .

• movable-area The width and height of both are 0,movable-view Of width Not for 0,height by 0 The situation of （height Not for 0 The situation is similar ）.

• movable-area When the width and height of is different, it is 0

  • if movable-area and movable-view Of width Not for 0, perhaps height Not for 0, Its performance is shown in the following figure ：
  • movable-area There are width by 0,height Not for 0, and movable-view Of width Not for 0,height by 0 The demonstration of the moving range of the situation is shown in the figure below , The opposite is similar ;

From the above demonstration, we can know ：

movable-area and movable-view Also for 0 The situation of , The two areas are not 0 And it behaves similarly in the presence of crossover .

movable-view The content of the child element of exceeds its size

movable-area and movable-view Element must be set width and height, But sometimes we movable-view The content of the child element of exceeds its set width and height , At this time, how does it behave ？

Say first conclusion ：

The moving range of dragging and sliding elements is determined by movable-area and movable-view The elements determine , And movable-view The size of the child element of does not matter .

in other words ,movable-area and movable-view Once the width and height of are set , The moving range is fixed , As shown in the figure below .

movable-view Determine the draggable elements

To implement elements, drag , At least to meet ：

• Draggable elements must pass movable-view Set up
• movable-view It has to be for movable-area The direct child element of

Explain , Can be in movable-area Set up multiple movable-view It means setting multiple slidable blocks , For example, this article # Wechat applet is based on movable-area Realization DIY T T-shirt /logo customized Drag of implementation .

Realize a multi-stage dragging of cards

For example, a card in a product requirements screen supports multi-stage sliding , For example, the three-stage formula shown in the figure below ：

requirement ： After page data initialization, the card moves to h2 The key is location , Users manually drag to h2 ~ h1 When the middle position of , The card moves to h1 The location of , If the middle position is lower, move to h2 The location of ,h1~h0 Card position strategy and h2 ~ h1 equally .

An implementation idea ： We can learn from the above discussion movable-area and movable-view Areas are 0, But the two intersect , Concrete realization ：

• movable-area Set its area size to width by 0,height by 100vh
• movable-view Set its area size width by 100vw,height by 0
• movable-view The sub element content of is the display content of the card

such ,movable-view The range of movement in the vertical direction is movable-area Height range , Equivalent to in the vertical direction ,movable-area Is longer than movable-view, Therefore, the moving range of the latter cannot exceed that of the former .

wxml The structure of is as follows ：

 
 
 
 ...
 
 
 

Can be in movable-view Of change In the event, collect the card after sliding y Offset value of direction , At the end of the touch event, the final sliding offset value of the card is uniformly calculated .

Page({
 //  Below h0、h1、h2、100vh  Respectively represent the card multi segment sliding range required by the requirements 
 data: {
     offsetY: h2,
     segs: [{
         value: h0,
         mix\_value: h0,
         max\_value: (h0 + h1)/2
     }, {
         value: h1,
         mix\_value: (h0 + h1)/2,
         max\_value: (h1 + h2)/2
     }, {
         value: h2,
         mix\_value: (h1 + h2)/2,
         max\_value: 100vh
     }]
 },
 ...
 onChange(event) {
   if (event.detail.source) {
      this.\_offsetY = event.detail.y
   }
 },
 onTouchEnd() {
     const y = this.\_offsetY;
      const idx = this.segs.findIndex(item => {
        return (
          y >= item.min\_value && y <= item.max\_value
        );
      });
      if (idx !== -1) {
        this.setData({
            offsetY: this.segs[idx].value
        })
      }
 }
})