Slide portrait demo Slide landscape demo please view it in Google Chrome mobile Simulation

Concrete implementation idea

Touch events can respond to user finger (or stylus) movements on the screen or trackpad, providing reliable support for touch-based user interfaces.

The Touch event interface is a lower-level API that provides support for multitouch interactions (such as two-finger gestures) for specific programs. Multi-touch interaction starts when a finger (or stylus) touches the surface of the device. Other fingers can then touch the surface of the device and swipe at will. The interaction ends when all fingers leave the device plane. During the whole interaction, the program receives touch events of three stages: start, move and end.

Touch events are similar to mouse events, except that they also provide simultaneous touches at different locations on the same surface. The TouchEvent interface encapsulates all the currently active touch points. The Touch interface represents a single Touch point that contains the relative coordinates of the reference browser perspective.

  • touchStartThe TouchStart event is triggered when the contact makes contact with the surface of the touch device
  • touchmoveThe TouchMove event is triggered when a touch moves on the touch plane
  • touchendThe TouchEnd event is triggered when the contact leaves the touch plane

See document touch events for details

The properties in the Event object triggered by the Touch Event are changedTouches and Target

  • changedTouchesA pseudo-array containing a list of touch points
  • targetTouch the DOM element object of the point

Implementation details

  1. Get the element object to listen on (here is the UL list)
var list = document.querySelector('.list')
Copy the code
  1. Listening to thetouchStartThe event
var startX = 0; // Initialize list.adDeventListener ('touchstart'.function(e) { e = e || window.event; e.preventDefault(); // Block the default event startX = e.touches [0]. ClientX; })Copy the code
  1. Listening to thetouchmoveThe event
var nav = document.querySelector('#nav'); Var centerX = 0; Var maxLeft = 50; Var maxRight = -(list.offsetwidth - nav.offsetwidth + maxLeft) list.adDeventListener ('touchmove'.function(e) { e = e || window.event e.preventDefault() var dx = e.changedTouches[0].clientX - startX; Var tempX = centerX + dxif(tempX > maxLeft) {tempX = maxLeft; }else if(tempX < maxRight) {tempX < maxRight; } list.style.transform ='translateX('+tempX+'px)'
    // ul.style.transform = `translateY(${tempY}Px) '//es6Copy the code
  1. Listening to thetouchendThe event
var maxLeftSlide = 0; Var maxRightSlide = -(list.offsetwidth -nav.offsetwidth + maxLeftSlide); List. AddEventListener ('touchend'.function(e) { e = e || window.event e.preventDefault() var dx = e.changedTouches[0].clientX - startX; CenterX = centerX + dx; // Tired plus the distance you moved last timeif(centerX > maxLeftSlide) { centerX = maxLeftSlide; // return to initial display position}else if (centerX < maxRightSlide) {
    	centerX = maxRightSlide;
    }
    
    if(dx === 0) {
        var text = document.querySelector('#text')
    	text.innerHTML = e.target.innerHTML
    }
    list.style.transition = 'transfrom .5s'// Add transition animation list.style.transform ='translateX('+centerX+'px)'
    // ul.style.transform = `translateY(${centerY}px)`
})
Copy the code

Since we allow ul to slide left and right beyond maxLeft in the TouchMove event, we need to bounce back at the end of the touchMove event, which is achieved by adding a CSS3 transition animation

We have blocked the default event in all of the events (this is to prevent the browser’s default slide event), so the click event will not fire, so we need to simulate the click event with Touch, Basically, when touchStart is triggered and the movement is zero we can say that it’s a click event

  1. Little optimization

When you move to the boundary, you see a blank background outside the boundary, which is kind of a bad experience.

Add a 50px horizontal fill for ul, then pan it 50px to the left, and finally modify the maximum left out distance and maximum left display distance

css

.list {
    padding: 0 50px;
    transform: translateX(-50px);
}
Copy the code

js

var maxLeft = 0;
var maxLeftSlide = -50;
Copy the code

The final code

The Head part

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = no">
Copy the code

Document structure (take lateral sliding as an example)

<nav id="nav">
    <ul class="list"Latest > < li > < / li > < li > list < / li > < li > China < / li > < li > international < / li > < li > social < / li > < li > comments < / li > < li > depth < / li > < li > military < / li > < li > history < / li > Explore the < li > < / li > < li > images < / li > < li > blog < / li > < li > media < / li > < li > video < / li > < / ul > < nav > < p id ="text"></p>
Copy the code

CSS code

* {
    margin: 0;
    padding: 0;
}

#nav {
    width: 100%;
    overflow: hidden;
}

#nav::after {
    content: ' ';
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

.list {
    float: left;
    white-space: nowrap;
    background: #1062ac;
    color: #CCCCCC;
    padding: 0 60px;
    transform: translateX(-50px);
}

.list>li {
    display: inline-block;
    padding: 10px;
}
Copy the code

This is still a simple directory navigation layout, with all li elements floating left and then floating cleanly using the After pseudo-class

Js code

var nav = document.querySelector('#nav');
var list = nav.children[0];
var newList = list.children[0];
var startX = 0;
var centerX = -50;
var maxLeft = 0;
var maxRight = -(list.offsetWidth - nav.offsetWidth + maxLeft);
var maxLeftSlide = -50;
var maxRightSlide = -(list.offsetWidth - nav.offsetWidth + maxLeftSlide);
list.addEventListener('touchstart'.function(e) {
    e = e || window.event
    e.preventDefault()
    list.style.transition = 'none'
    startX = e.changedTouches[0].clientX;
})

list.addEventListener('touchmove'.function(e) {
    e = e || window.event
    e.preventDefault()
    
    var dx = e.changedTouches[0].clientX - startX;
    var tempX = centerX + dx
    
    if (tempX > maxLeft) {
    	tempX = maxLeft;
    } else if (tempX < maxRight) {
    	tempX = maxRight;
    }
    list.style.transform = 'translateX('+tempX+'px)'
    // ul.style.transform = `translateY(${tempY}px)`
})

list.addEventListener('touchend'.function(e) {
    e = e || window.event
    e.preventDefault()
    
    var dx = e.changedTouches[0].clientX - startX;
    centerX = centerX + dx;
    if (centerX > maxLeftSlide) {
    	centerX = maxLeftSlide;
    } else if (centerX < maxRightSlide) {
    	centerX = maxRightSlide;
    }
    
    if(dx === 0) {
        var text = document.querySelector('#text')
    	text.innerHTML = e.target.innerHTML
    }
    list.style.transition = 'transfrom .5s'
    list.style.transform = 'translateX('+centerX+'px)'
    // ul.style.transform = `translateY(${centerY}px)`
})
Copy the code