Project description

At the end of 2018, I was working on the H5 page of the annual report. Due to the needs of the project, I needed to realize the sliding up and down page turning, and the sliding up page was reduced by a certain proportion compared with the normal page.

Effect similar to http://www.17sucai.com/pins/demo-show?id=7834 this link are implemented based on jquery, I wrote like this example effect, just use the vue.

Code address: github.com/dreamITGirl… //demo

Another of my blog: www.cnblogs.com/bllx/p/1026…

First, the plugin that the project relies on: slide up and down pages using V-Touch is a VUE wrapper based on Hammer.js. Also don’t have to write this plug-in, with js native directly, through the touchStart, touchMove, touchEnd to implement can be;

Now, to summarize a few points, this is a pit I ran into when I was writing code.

First, about the sliding plug-in pit

1. Because I’m using the PAN property in V-Touch and its associated methods and events. As a result, if there is still a scrolling area inside the component, there could be conflicts (CSS conflicts if there is still a sliding area in the Component) that will not be completely resolved before the project goes live.

2, whether using V-touch or js native, there will be this problem, in the realization of sliding up and down the page switch, the use of pure CSS to control the sliding up and down distance. So CSS can be in conflict. Therefore, it is recommended not to reappear the scroll area inside the original scroll area using V-Touch or JS. The next blog post will focus on solutions to this problem.

<v-touch class="container" 
                 @panstart.prevent="panStart"
                 @panmove.prevent="panMove"
                 @panend.prevent="panEnd">
            <component v-for="(val,index) in componentList" 
                        :key="index" :is="val" 
                        :style="{
                            zIndex:zIndex(index),
                            transition:`all ${transition(index)}s`,
                            transform:`translateY(${top(index)}) scale3d(${scale(index)}, 1,${scale(index)})`
                        }"
                        
            ></component>  
              
   </v-touch>
Copy the code
Two, the calculation of rolling distance

Look at the picture to understand

You need to control the top value, z-index value, scale value for each page, and the transition time for smooth effect.

When the page slides up (down), page 3 (Page 1) becomes the currently displayed page, and page 2 becomes the previous page (next page). Since page 3 (page 1) is the last page, the user can’t slide any further, so, We need to look at the current index value when panmove and panend and the last and first items in the currently displayed component array

Focus on panmove, that is, scrolling, page changes and how the top value and slide distance is calculated. Or look at the picture:

The inside the hardest thing to understand is that the slide, or slide in the distance, in my code, version 1.0 does not address two pages still a distance, the distance is short of the two-thirds, when panend, we need to have a look at the user sliding distance is pages, if the distance is very small, cannot flip, It’s best to add judgment. In version 1.1, the component top attribute was removed from the loop so that the distance difference problem of 1.0 was not present.

When you scroll up, page 1 becomes another page, page 2 becomes the previous page, and page 3 becomes the current page. For each of these three pages, they move up by one screen height, while page 3’s height top value becomes 0, and page 2 becomes -1 * the screen height. Page 1 is going to be -2 times the height of the screen, but for page 1, it’s going to be some other image, so its height is going to be (its index- the current index) times the height of the screen.

The solution to the current slide up (slide down) page scaling is to set the current page scaling rate to 1 when panstart, and randomly set the scaling rate according to the sliding distance when Panmove. During panend, set the delay so that the zoom rate becomes.

So, the normal pattern for sliding is

Specific code, everyone can use them to download on the lot, if you don’t use v – touch, you can also use touchStart, touchMove, touchEnd corresponding display.