Swipe-tab Component (Swipe-Tab)

The basic idea

1. Listen for the following touch events

Touchstart: // Triggered when a finger is placed on the screen

Touchmove: // Triggered when a finger slides across the screen

Touchend: // Triggered when the finger leaves the screen

2. Calculate the slide value and set it

Dynamically set the translate3D property in the container’s Transform in the TouchMove event callback to make the TAB move as it slides

3. Set the sliding TAB threshold in the Touchend callback

When the TAB slides over a certain threshold, release the TAB and the TAB automatically switches over

Online browsing

Recommended mobile phone access

The source code

See more on my Github

Page turning component (touch-flipbook)

Dom structure

<div class="touch-flipbook" ref="touchCon" @touchstart.prevent="TouchStart" @touchmove.prevent="TouchMove"
@touchend="TouchEnd">
    <div class="page p0"> <! -- /* Page has two sides */ --> <div class="front"</div> <div class="back"</div> </div> <! -- /* page2 --> <div class="page p1">
        <div class="front"</div> <div class="back"</div> </div> <div class="page p2">
        <div class="front"</div> <div class="back"</div> </div>Copy the code

Touch events are handled in much the same way as sliding tabs above, except that

The rotate property in the transform must be dynamically set.

The following points need to be noted:

  • Because front and back overlap, the back is mirrored after being flipped. In this case, you need to set this parameterscaleY(1)To solve the mirror problem.
  • Pay special attention to the Z-index. The z-index of the upper page is larger than that of the back page. The z-index of the front page is larger than that of the back page
  • The flip value of each page should be saved for subsequent modification when you turn back to the page.

Online browsing

Recommended mobile phone access

The source code

See more on my Github