*Web APIs 7 touch screen events, common special effects on mobile terminals, click delay solutions, common development plug-ins on mobile terminals, common development frameworks on mobile terminals, local storage

1.1. Touch screen events

1.1.1 Overview of touch screen events

The mobile browser compatibility is better. We don't need to consider the previous JS compatibility issues. We can use the native JS writing effect with confidence, but the mobile terminal also has its own unique place. For example, touch event touch (also called touch event), both Android and IOS. The touch object represents a touch point. The touch point may be a finger or a touch pen. Touch screen events can respond to the user's finger (or stylus) operating on the screen or touchpad.

Common touch screen events are as follows:
Insert picture description here

1.1.2 Touch Event Object (TouchEvent)

TouchEvent is a type of event that describes the state change of the finger on the touch plane (touch screen, touch pad, etc.). This type of event is used to describe one or more contacts, allowing developers to detect the movement of contacts, the increase and decrease of contacts, etc.

The three events of touchstart, touchmove, and touchend will each have event objects.

Focus on touch event objects Let’s look at a list of three common objects:
Insert picture description here

Because we usually register touch events for elements, we must remember targetTocuhes

1.1.3 Drag the element on the mobile terminal

touchstart, touchmove, touchend can realize dragging elements
But dragging the element requires the coordinates of the current finger. We can use pageX and pageY in targetTouches[0]
The principle of dragging on the mobile terminal: Calculate the distance moved by the finger during the movement of the finger. Then use the original position of the box + the distance moved by the finger
The distance the finger moves: the position of the finger sliding minus the position where the finger just started touching

Three steps of dragging elements:

(1) Touch element touchstart: Get the initial coordinates of the finger and the original position of the box at the same time

(2) Move the finger touchmove: Calculate the sliding distance of the finger and move the box

(3) Leave the finger touchend:

Note: Finger movement will also trigger the scrolling of the screen, so here to prevent the default screen scrolling e.preventDefault();

1.2. Common special effects on mobile

1.2.1 Case: Mobile Carousel

移动端轮播图功能和基本PC端一致。

Can automatically play pictures
You can drag your finger to play the carousel

1.2.2. Case analysis:

Auto play function
Start timer
Mobile mobile, you can use translate to move
If you want the picture to move gracefully, please add a transition effect
Auto play function-seamless scrolling
Note that our judgment condition is to wait until the picture is scrolled and then judge, that is, judge after the transition is complete
At this time, you need to add a detection transition complete event transitionend
Judgment condition: If the index number is equal to 3, it means that the last picture is reached, and the index number should be restored to 0 at this time
At this time the picture, remove the transition effect, and then move
If the index number is less than 0, it means going backwards, and the index number is equal to 2.
At this time the picture, remove the transition effect, and then move

1.2.3 classList attribute

The classList attribute is a new attribute in HTML5 that returns the class name of the element. However, versions above ie10 are supported.

This attribute is used to add, remove and switch CSS classes in the element. There are the following methods

Add class:

element.classList.add（’类名’）；

focus.classList.add('current');

Remove class:

element.classList.remove（’类名’）;

focus.classList.remove('current');

Switching class:

element.classList.toggle（’类名’）;

focus.classList.toggle('current');

注意:以上方法里面，所有类名都不带点

1.2.4. Case study

Small dots follow the change effect
Select the li in ol with the current class name to remove the class name remove
Let the little li of the current index number add current add
However, it is waiting to change after the transition ends, so this is written in the transitionend event
Finger swipe carousel
The essence is that ul follows the finger to move, which is simply to drag the element on the mobile terminal
Touch element touchstart: Get the initial coordinates of the finger
Move the finger touchmove: Calculate the sliding distance of the finger and move the box
Leave the finger touchend: According to the sliding distance, there are different situations
If the movement distance is less than a certain pixel, it will rebound to the original position
If the moving distance is greater than a certain pixel, slide the previous one and the next one.
Sliding is also divided into left sliding and right sliding. The criterion for judging is the positive or negative moving distance. If it is negative, it is left sliding and vice versa.
If it is left swipe, play the next one (index++)
If you swipe right, play the previous one (index--)

1.3.1. Case: back to top

When the page scrolls somewhere, it will be displayed, otherwise it will be hidden

Click to return to the top

1.3.2. Case analysis

Scroll somewhere to show
Event: scroll page scroll event
If the head being rolled (window.pageYOffset) is greater than a certain value
Click, window.scroll(0,0) to return to the top

1.4. Click delay solution

There will be a 300ms delay for the click event on the mobile terminal. The reason is that a double tap to zoom the page on the mobile terminal screen will double tap to zoom.

solution:

1. Disable zoom. The browser disables the default double-click zoom behavior and removes the 300ms click delay.

  <meta name="viewport" content="user-scalable=no">

2. Use the touch event to encapsulate this event to solve the 300ms delay.

The principle is:

When our finger touches the screen, we record the current touch time
When we leave the screen with our finger, we use the time we leave to subtract the time we touched
If the time is less than 150ms and the screen has not been swiped, then we define it as a click

code show as below:

//封装tap，解决click 300ms 延时
function tap (obj, callback) {
    
    
        var isMove = false;
        var startTime = 0; // 记录触摸时候的时间变量
        obj.addEventListener('touchstart', function (e) {
    
    
            startTime = Date.now(); // 记录触摸时间
        });
        obj.addEventListener('touchmove', function (e) {
    
    
            isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击
        });
        obj.addEventListener('touchend', function (e) {
    
    
            if (!isMove && (Date.now() - startTime) < 150) {
    
      // 如果手指触摸和离开时间小于150ms 算点击
                callback && callback(); // 执行回调函数
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//调用  
  tap(div, function(){
    
       // 执行代码  });

Use plugins. The fastclick plugin solves the 300ms delay.

1.5. Commonly used mobile development plug-ins

1.5.1. What is a plugin

The mobile terminal requires rapid development, so we often use some plug-ins to help me complete the operation, so what is a plug-in?

The JS plug-in is a js file, which is written in accordance with certain specifications, which is convenient for program display effects, has specific functions and is convenient to call. Such as carousel diagram and waterfall flow plug-in.

Features: It generally exists specifically to solve a certain problem, and its function is single and relatively small.

The animate.js we wrote before is also considered to be the simplest plugin

The fastclick plugin solves the 300ms delay. Use delay

GitHub official website address: https:// github.com/ftlabs/fastclick

1.5.2. Use of plug-ins

Introduce js plug-in files.
Use in accordance with the prescribed grammar.
The fastclick plugin solves the 300ms delay. Use delay

GitHub official website address: https://github.com/ftlabs/fastclick

if ('addEventListener' in document) {
      
      
            document.addEventListener('DOMContentLoaded', function() {
      
      
                       FastClick.attach(document.body);
            }, false);
}

1.5.3. Use of Swiper plug-in

Chinese official website address: https://www.swiper.com.cn/

Introduce plug-in related files.
Use according to the prescribed grammar

1.5.4. Other common mobile plug-ins

lsuperslide ： http://www.superslide2.com/

l scroll ： https://github.com/cubiq/iscroll

1.5.5. Summary of plugin usage

1. Confirm the functions implemented by the plug-in

2. Go to the official website to check the instructions

3. Download the plugin

4. Open the demo example file, view the related files that need to be imported, and import

5. Copy the structure html, style css and js code in the demo example file

1.5.6. Mobile video plug-in zy.media.js

H5 provides us with the video tag, but the browser support is different.

We can solve different video format files through source.

But the appearance style, as well as pause, play, full screen and other functions we can only write code to solve.

At this time, we can use the plug-in method to make it.

We can modify the size, color, position and other styles of elements through JS.

1.6. Common development frameworks for mobile

1.6.1. Mobile video plug-in zy.media.js

A framework, as the name suggests, is a set of architecture, which will provide users with a relatively complete solution based on its own characteristics. The control of the framework lies in the framework itself, and the user has to develop in accordance with a certain specification stipulated by the framework.

The plug-in generally exists specifically to solve a certain problem, and its function is single and relatively small.

Commonly used front-end frameworks include Bootstrap, Vue, Angular, React, etc. Can develop both PC and mobile

Commonly used front-end mobile plug-ins include swiper, superslide, iscroll, etc.

Framework: large and complete, a complete set of solutions

Plug-in: small and specific, a solution for a certain function

1.6.2. Bootstrap

Bootstrap is a simple, intuitive, and powerful front-end development framework that makes web development faster and easier.

It can develop PC and mobile terminals

Steps to use Bootstrap JS plug-in:

1. Introduce related js files

2. Copy the HTML structure

3. Modify the corresponding style

4. Modify the corresponding JS parameters

1.7. Local storage

With the rapid development of the Internet, web-based applications are becoming more and more common, and at the same time becoming more and more complex. In order to meet various needs, a large amount of data will be stored locally. The HTML5 specification proposes related solutions. Program.

1.7.1. Local storage features

1. The data is stored in the user's browser

2. Easy to set up and read, even page refresh without losing data

3. Large capacity, sessionStorage is about 5M, localStorage is about 20M

4. Only strings can be stored, and objects can be stored after encoding JSON.stringify()

1.7.2.window.sessionStorage

1. The life cycle is to close the browser window

2. Data can be shared in the same window (page)

3. Store and use in the form of key-value pairs

Storing data:

sessionStorage.setItem(key, value)

retrieve data:

sessionStorage.getItem(key)

delete data:

sessionStorage.removeItem(key)

Clear data: (all cleared)

sessionStorage.clear()

1.7.3.window.localStorage

1. The declaration period takes effect permanently, and the closed page will also exist unless manually deleted

2. Multiple windows (pages) can be shared (the same browser can be shared)

Store and use in the form of key-value pairs

Storing data:

localStorage.setItem(key, value)

retrieve data:

localStorage.getItem(key)

delete data:

localStorage.removeItem(key)

Clear data: (all cleared)

localStorage.clear()

1.7.4. Case: Remember the user name

If you check Remember username, the next time the user opens the browser, the last logged-in username will be automatically displayed in the text box

case study

Store data and use local storage
Close the page, you can also display the user name, so localStorage is used
Open the page, first determine whether there is this user name, if so, display the user name in the form, and check the box
The change event when the check box changes
If checked, save, otherwise remove