Vue implements sliding stacking components

This time I will bring you the implementation of sliding stacking components in vue. What are the precautions for implementing sliding stacking components in vue. The following is a practical case, let's take a look.

Preface

Hi, talking about Tantan, I think all of you are familiar with the program (after all, there are many girls). Tantan’s stacked sliding components play a key role in being able to flip brands on it smoothly. Let’s take a look at how to write it with vue. A Tantan stacking component

1. Functional analysis

A brief summary of the basic functional points included:

• Stacking of pictures

• Sliding of the first picture

  
  

• Sliding out after the condition is successful, condition Rebound after failure

  
  

• The next picture after sliding out is stacked to the top

  
  

• Experience optimization

  
  

• According to different touch points, the first image will be offset at different angles when sliding

  
  

• The offset area determines whether the slide-out is successful

  
  

2. Specific implementation

With the summarized functional points, our ideas for implementing components will be clearer

1. Stacking effect

There are a large number of examples of stacked picture effects on the Internet. The implementation methods are similar. The perspective of the sub-layer is mainly achieved by setting perspective and perspective-origin on the parent layer. The stacking effect can be simulated by setting the translate3d Z-axis value on the sub-layer. , the specific code is as follows

// 图片堆叠dom
 
 

 

 

 

 

 

The above is just a set of static code. What we hope to get is a vue component, so we need to create a component template stack.vue first. In the template, we can use v-for to traverse the stack nodes and use :style to modify the style of each item. , the code is as follows

key point

:style can bind objects as well as arrays and functions, which is very useful when traversing.
The most basic dom structure has been constructed, and the next step is to make the first picture "move"

2. Picture sliding

The picture sliding effect appears in many scenes. Its principle is nothing more than listening to the touches event, getting the displacement, and then changing the target displacement through translate3D. Therefore, the steps we want to implement are as follows

• Binding the touches event to the stack

• Monitor and store the value of the gesture position change

  
  

• Change The x and y values ​​of translate3D in the css attribute of the first image

  
  

# Implementation

In the vue framework, it is not recommended to directly operate nodes, but to bind elements through the instruction v-on. Therefore, we write the bindings in v-for traversal, and use index to determine whether it is the first image, and then use :style modifies the style of the homepage. The specific code is as follows:

3. Slide out after the condition is successful, rebound after the condition fails

The triggering judgment of the condition is performed after touchend/mouseup. Here we first use simple conditions to judge, and at the same time give the first image pop-up and rebound effect. The code is as follows

4. After sliding out, the next picture is stacked on top

Restacking is the last function of the component, and it is also the most important and complex function. In our code, the sorting of stack-item depends on the transformIndex and transform function of the binding: style. The condition determined in the function is currentPage. Is it necessary to change the currentPage to 1 to complete the re-stacking?

The answer is not that simple, because our slide out is an animation effect, which will last 300ms, and the rearrangement caused by the change of currentPage will change immediately, interrupting the progress of the animation. Therefore, we need to modify the sorting conditions of the transform function first, and then change the currentPage.

# Implementation

• Modify the sorting condition of transform function

Let currentPage

• Add the on

  TransitionEnd event
, and after the slide-out ends, relocate it to the stack list

The code is as follows:

### ok~ After completing the above four steps, the basic functions of stacking components have been implemented. Come and see the effect###

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How Native uses fetch to implement the image upload function

vue.js moves the array position and updates it in real time view

The above is the detailed content of Vue implements sliding stacking components. For more information, please follow other related articles on the PHP Chinese website!