1.1. Touch screen events

1.1.1 Overview of Touchscreen Events

Mobile browser compatibility is better, we do not need to consider the previous JS compatibility problems, can rest assured to use the original JS writing effect, but mobile terminal also has its own unique place. For example, touch events (also known as touch events) are available on both Android and IOS. The Touch object represents a touch point. The touch point could be a finger or a stylus. The touch screen event responds to the user’s finger (or stylus) movement on the screen or trackpad.

Common touch screen events are as follows:

1.1.2 TouchEvent

TouchEvent is a kind of event that describes the state change of finger on the touch plane (touch screen, touchpad, etc.). These events are used to describe one or more contacts, allowing developers to detect movement of contacts, increase or decrease of contacts, and so on

Touchstart, TouchMove, and TouchEnd all have event objects.

The touch event object highlights three common object lists:

Because we normally register touch events for elements, keep targetTocuhes in mind

1.1.3 Drag elements on the move

  1. Touchstart, TouchMove, and TouchEnd can implement dragging elements
  2. But the drag element requires the current finger coordinate value. We can use pageX and pageY inside targetTouches[0]
  3. The principle of moving terminal drag: finger movement, calculate the distance of finger movement. Then take the original position of the box + the distance your finger moves
  4. Distance of finger movement: the position of the finger in the slide minus the position of the finger at the beginning of the touch

Drag elements in three steps:

(1) Touch element touchStart: to obtain the initial coordinates of the finger and the original position of the box

(2) Touchmove finger: calculate the sliding distance of finger and move the box

(3) Leave the finger touchend:

Note: finger movement also triggers scrolling so prevent default scrolling here. E.preventdefault ();

1.2. Common effects on mobile terminals

1.2.1 Case: Mobile rote chart

The function of the mobile terminal is consistent with that of the basic PC terminal.

  1. Can automatically play pictures
  2. Fingers can be dragged to play a wheel – cast image

1.2.2. Case Analysis:

  1. Autoplay function
  2. Start timer
  3. Translate translate is used to move data on the mobile terminal
  4. To move gracefully, add transition effects!

  1. Auto play feature – seamless scrolling

  2. Note that our judgment condition is to wait until the picture is rolled before judging, that is, after the transition is completed

  3. In this case, you need to add the transitionEnd event to check the transition completion

  4. Judgment condition: If the index number is 3, it indicates that the last picture is reached, and the index number should be restored to 0

  5. At this point, remove the transition effect and move it

  6. If the index number is less than 0, it is going backwards, and the index number is 2

  7. At this point, remove the transition effect and move it

1.2.3 classList properties

The classList attribute is a new HTML5 attribute that returns the class name of an element. But IE10 and later support it.

This property is used to add, remove, and switch CSS classes from elements. There are the following methods

Add the class:

Element.classlist.add (‘ class name ‘);

focus.classList.add('current');
Copy the code

Remove the class:

Element.classlist. remove (‘ class name ‘);

focus.classList.remove('current');
Copy the code

Switch:

Element.classlist. toggle (‘ class name ‘);

focus.classList.toggle('current');
Copy the code

Note: in the above method, all class names are not marked

1.2.4. Case analysis

  1. Small dots follow the change effect

  2. Remove from OL class name li with current

  3. Add current add to li

  4. However, this is written to the transitionEnd event as it waits for the transition to end

  1. Finger slide wheel cast diagram
  2. Essentially, ul moves with the finger, simply by dragging elements on the move
  3. Touch element touchStart: Gets the initial finger coordinates
  4. Touchmove finger: Calculates the finger’s sliding distance and moves the box
  5. Away from finger touchend: According to the sliding distance of different situations
  6. If it moves less than a certain pixel, it bounces back to its original position
  7. If the distance is greater than a certain pixel slide up and down.
  8. Sliding can also be divided into left sliding and right sliding. The criterion for judging the moving distance is positive and negative. If it is negative, it is left sliding and vice versa
  9. If you swipe left, play the next one (index++)
  10. If you swipe right, play the last one (index–)

1.3.1. Case: Back to the top

When the page scrolls somewhere, it shows, otherwise it hides

Click to return to the top

1.3.2. Case analysis

  1. Scroll somewhere to show
  2. Event: Scroll event
  3. If the rolled out header (window.pageyoffset) is greater than a certain value
  4. I’ll hit window.scroll(0,0) to go back to the top

1.4. Click delay solution

The mobile click event has a 300ms delay because the mobile screen double tap to zoom the page.

Solution:

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

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

2. Use the Touch event to encapsulate the event itself to resolve the 300ms delay.

The principle is:

  1. When we touch the screen with our finger, we record the current touch time
  2. When our finger leaves the screen, subtract the touch time from the time it leaves
  3. If the time is less than 150ms and the screen has not been swiped, we define it as a click

The code is as follows:

// Encapsulate tap to solve click 300ms delay
function tap (obj, callback) {
        var isMove = false;
        var startTime = 0; // Record the time variable when touching
        obj.addEventListener('touchstart'.function (e) {
            startTime = Date.now(); // Record the touch time
        });
        obj.addEventListener('touchmove'.function (e) {
            isMove = true;  // See if there is a slide. If there is a slide, it is drag, not click
        });
        obj.addEventListener('touchend'.function (e) {
            if(! isMove && (Date.now() - startTime) < 150) {  // Click if the finger touch and leave time is less than 150ms
                callback && callback(); // Execute the callback function
            }
            isMove = false;  // take the reverse reset
            startTime = 0;
        });
}
/ / call
  tap(div, function(){   // execute code});

Copy the code

  1. Use plug-ins. The FastClick plug-in solves the 300ms delay.

1.5. Commonly used development plug-ins on mobile terminals

1.5.1. What is a plug-in

Mobile terminal requires rapid development, so we often rely on some plug-ins to help me complete the operation, so what is a plug-in?

JS plug-in is A JS file, it follows a certain standard written, convenient program to show the effect, has a specific function and easy to call. Such as the wheel map and waterfall stream plug-ins.

Characteristics: It is generally in order to solve a problem and specialized existence, its function is single, and relatively small.

The animate. Js we wrote earlier is one of the simplest plug-ins

The FastClick plug-in solves the 300ms delay. Using time delay

Making the website address: https://github.com/ftlabs/fast…

1.5.2. Use of plug-ins

  1. Import the JS plug-in file.

  2. Use the prescribed grammar.

  3. The FastClick plug-in solves the 300ms delay. Using time delay

  4. GitHub website: github.com/ftlabs/fast…

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

1.5.3. Use of Swiper plug-in

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

  1. Import plug-in related files.
  2. Use the prescribed grammar

1.5.4. Other common plug-ins on mobile terminals

Lsuperslide: www.superslide2.com/

L iscroll: github.com/cubiq/iscro…

1.5.5. Summary of the use of plug-ins

1. Confirm the functions of the plug-in

2. Check the instructions on the official website

3. Download the plug-in

4. Open the Demo instance file, view related files to be imported, and import them

5. Copy the structural HTML, style CSS and JS code from the demo instance file

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

The H5 gives us the video TAB, but browser support is different.

For different video format files, we can solve them through Source.

But the look and feel, and pause, play, full screen and so on we had to code it ourselves.

At this point we can use the plug-in way to make.

We can change the size, color, position and other styles of elements with JS.

1.6. Commonly used development frameworks for mobile terminals

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

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

Plug-ins generally exist specifically to solve a problem, and their functions are single and relatively small.

Common front-end frameworks include Bootstrap, Vue, Angular, React, etc. It can develop both PC side and mobile side

Common front-end mobile terminal plug-ins include Swiper, Superslide, and Iscroll.

Framework: big and complete, a whole set of solutions

Plug-ins: Small, specific, functional solutions

1.6.2. The Bootstrap

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

It can be developed on PC as well as mobile

Bootstrap JS plug-in

1. Import relevant JS files

2. Copy the HTML structure

3. Modify the corresponding style

4. Modify the JS parameters

1.7. Local storage

With the rapid development of the Internet, web-based applications are becoming more and more common, but also becoming more and more complex. In order to meet various needs, large amounts of data are often stored locally. The HTML5 specification proposes relevant solutions.

1.7.1. Local storage

1. Data is stored in the user’s browser

2, easy to set, read, and even page refresh without loss of data

3, large capacity, sessionStorage about 5M, localStorage about 20M

4, can only store strings, can encode the object json.stringify () store

1.7.2. Window. SessionStorage

1. The lifecycle 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)
Copy the code

Get data:

sessionStorage.getItem(key)
Copy the code

Delete data:

sessionStorage.removeItem(key)
Copy the code

Clear data :(all cleared)

sessionStorage.clear()
Copy the code

1.7.3. Window. LocalStorage

1, declare that the cycle is permanent, unless manually deleted or closed page will exist

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

3. Store them as key-value pairs

Storing data:

localStorage.setItem(key, value)
Copy the code

Get data:

localStorage.getItem(key)
Copy the code

Delete data:

localStorage.removeItem(key)
Copy the code

Clear data :(all cleared)

localStorage.clear()
Copy the code

1.7.4. Case: Remember the user name

If you select Remember user name, the next time the user opens the browser, the last login user name will be automatically displayed in the text box

Case analysis

  1. Save the data for local storage

  2. Close the page, you can also display the user name, so use localStorage

  3. Open the page and check whether the user name exists. If so, display the user name in the form and check the checkbox

  4. Change event when the checkbox changes

  5. If it is checked, it is stored, otherwise it is removed