How to use vue to make exploratory sliding stacking components

This article Xiaobian introduces in detail for you "how to use vue to make exploratory sliding stack components", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use vue to make exploratory sliding stacking components" can help you solve your doubts.

The effect image is as follows:

Preface

Hey, speaking of probing, you must be no stranger to the program (after all, there are a lot of girls). The stack sliding module that can flip the brand silently on it plays a key role. Let's take a look at how to write a probing stack component in vue.

one。 Functional analysis

If you simply use the probe, you will find that the function of stack sliding is very simple, which can be summarized in a picture:

Briefly summarize the basic functional points included in it:

The stack of pictures

The slide of the first picture

Slide out after success of condition, springback after failure of condition

After sliding out, the next picture is stacked to the top.

Experience optimization

According to the different touch points, the head image has different angle offset when sliding.

The offset area determines whether the slip is successful or not.

two。 Concrete realization

With the summarized function points, our idea of implementing components will be clearer.

1. Stacking effect

There are a large number of examples of stacking pictures on the Internet, and the implementation methods are more or less the same. The perspective of the sublayer is mainly realized by setting perspective and perspective-origin in the parent layer. The stacking effect can be simulated by setting the value of translate3d Z axis in the sublayer. The specific code is as follows

/ / Image stacking dom

Stack {width: 100%; height: 100%; position: relative; perspective: 1000px; / / child element sight distance perspective-origin: 50% 150%; / / child element perspective position-webkit-perspective: 1000px;-webkit-perspective-origin: 50% 150%; margin: 0; padding: 0;} .stack-item {background: # fff; height: 100%; width: 100%; border-radius: 4px; text-align: center; overflow: hidden;}. Stack-item img {width: 100% Display: block; pointer-events: none;}

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