Development practice of sliding screen H5 nine questions

The interactive form of sliding screen has been widely used in product promotion, advertising, recruitment and operation, and so on, it has been strengthened and enlarged in the form of advertising in H5 circle. Now the slide screen H5 is Ling Lang everywhere, countless numbers.

As a UI engineer, take a lot of similar projects, have also written a slide screen plug-ins, in the experience of different needs of the "baptism" and stepped through a number of pits, can not help but ask yourself: how should face each similar needs, in the experience of how to experience better? How to save work and improve efficiency? How do you experience uniformity and performance best with an Android platform that features excellent IOS and performance?

　　First question: Drag and drop the screen, or slide the screen?

Page with the gesture drag after the flip-screen slide (touchend) After the flip screen

As shown in the above two Gif images, the difference between the two approaches is:

Drag and Drop screen: The page with the finger drag and move, the fingers release (touchend) after the page

Slide Flip Screen: The page does not move with the fingers, the fingers release (touchend) and then page

There are two different kinds of interactions that seem to be very different, and the complexity varies enormously, and the experience in Android is different. The former needs to be calculated and positioned at each touchmove, with a huge computational load (attention to digital changes):

The latter only need to be released after the finger to calculate and page, the performance of a significant increase:

And when switching from the first to the second, subtle changes in the interaction do not have a visual impact. So from the performance point of view, sliding screen is naturally the best choice.

　　Second question: What is the best way to achieve the slide screen technology?

Control wrapper sliding control each screen slide

As shown in the Gif image, the slider can operate on the wrapper, or you can use each screen as a separate sliding element. Simple sliding may not be very different, but if you take into account a variety of requirements and scenarios, you can find that on the slide screen will also be able to refine a number of function points:

Circular sliding

Sliding Disable and open

Pre-load/delay loading

Display a page when initializing

Scroll to a page, skip a page

Provides an interface for sliding, slipping, and sliding.

Sliding time, speed, easing effect customization

Consider dynamic additions and deletions without errors

Consider page scaling, screen switching

Under the above requirements, the former has become redundant, and the latter because of the freedom between the elements can meet the above needs, and the effect is better, although the implementation of complexity will improve.

The most important thing is that the former is implemented in some of the Android occasional card in the previous screen and the next screen between the situation, at the beginning of the encounter to do a lot of remedies have no fruit, finally only reluctantly replaced the entire slide scheme, the second control of the internal elements of the way, can be described as the blood of the lesson.

What is stuck between the previous screen and the next screen, something like this:

Simple analysis of the reason, the entire page through the body to monitor touchmove when the Event.preventdefault () to prevent the nature of the page sliding, but the only Android sometimes in the animation elements on the move, the body will not capture the Touchmove event, The page can scroll, then appear above can slide wrapper, and the scheme two control each screen slide, the widest maximum of each screen is only the width of the screen, also will not appear page sliding.

　Third question: Does the first screen need Loading page?

Do you need it? No need, no need.

Need not to look at the needs of the H5 positioning, if similar to the micro-letter friend Circle Advertising This brand operation H5, there is a large number of material as a support page, is required to enter the loading page, this hope to reach a consensus with the product manager, but if the page is a series of activities in the more important entry, need to enter, Do not have loading page, strive to enter can see directly.

In the case of loading, it is also necessary to consider:

Do you want to load all resources at once? No no no, even if there is a special loading page, please separate screen loading, otherwise there will be a large loss of users.

What kind of knowledge should be formed between the volume of resources and time? Look at the table (according to the Chrome Developer Tool Network conversion data):

The above is the ideal value, in fact according to Tencent Cloud statistics to the 2g/3g download rate, far from the ideal speed:

According to the "Ministry of Industry and the three major operators released November user development" can be learned: China Mobile user 2G users accounted for 41.4%,3g users accounted for 27.3% of 31.3%,4g users. The status quo is far from what we imagine in the long term WiFi environment, although these users are not using 2g/3g for a long time, but the page must ensure a smooth browsing experience in the 2/3G environment to avoid user churn. It is recommended that the first screen resources be around 300KB (about 2~3s) and set the cache.

In the case of loading, it is also necessary to consider:

If the page has a rich animation, need to load resources to be normal playback? Either remove the animation, or use CSS or JS to achieve animation, you must make trade-offs.

Since it is no loading page, natural speed requirements, but also to increase the speed of loading? OK, please split the screen load. If you want to experience seamless, please load the next screen of resources on the previous screen.

Question four: What about internal scrolling?

Internal scrolling is the interior of a screen with scrolling (but actually the scrolling of the system is conflicting with the scrolling of the sliding screen), if this screen does not involve complex DOM, I still think I can use Iscroll, although its performance in Android has been criticized, but after a very many Android test, the effect is within the acceptable range of , but don't forget the premise that the DOM is not complex (such as an Activity Rule page).

Is there a better solution? Look back at the best way to achieve the slide screen:

You can see that in each screen, when the previous screen or the next screen slide to the current screen, the previous screen will remove the translate attribute, return to the original state (by the current screen under the cover, that is position:absolute; left:0; top:0), this time, The Position:absolute of the current screen; height:100% removed, so that it returned to the document flow, then the body will be stretched, the page can be normal sliding, is not even iscroll are saved?

Trying to write a Demo:

As you can experience, the ideal is full, the reality is very bone, experience on the PC this demo is no problem (please simulate the mobile phone slide in Chrome), however, because many iOS and Android browsers are bounce rebound effect, and iOS and Android's big In some browsers, page scrolling will prevent the page from redrawing (JS execution can not be effective immediately in the page), so the effect of the demo is rebound after the screen. So the current scenario page is limited to certain scenarios.

Question five: Is the background music turned on or off by default?

Before doing a promotional campaign H5, the default turned on the music, found that only 800 of the 28w exposure to the active closure of music. So the default to open or optimal, in the production of audio attention to the best volume in the 100~200k range, and the default volume should not be too high, the end gradually into the gradually out, but also pay attention to copyright.

Now, whether it's a hand Q or a micro-letter, there is a couple of bugs: switching pages on a phone or returning to the main screen, H5 's background music is still playing unless you kill the process. Preliminary speculation for WebView was not correctly released.

　　Q: Does the H5 page need to take into account the PC platform?

Many H5 pages are only displayed for mobile devices, but what if the shared links are open in the PC? For example, share to the micro-blog or QQ space link, is being viewed on the computer to open, see is an abnormal display of the page, such experience is very bad. So the best way is to prepare a PC scan code page or move the content to the PC, through the loop, for H5 page drainage.

As before the QQ Time Machine project:

　Question seventh: How does the animation do low version degradation?

Mobile end of the CSS3, Canvas, SVG animation support has been good, the current poor compatibility of the system is mainly Android 2.3, it does not support the Animtion-fill-mode attribute, which will cause the animation can not remain in the final state after the playback; no support for before/ After the pseudo element animation, does not support animation-timing-function:steps, so can not play the image sequence frame, so you could specifically for this version of the differential processing, through the determination of UA to show the static page.

However, the best degradation mode should not be version detection, but capability detection, which can be used to judge the capabilities of the equipment by Modernizr this component.

　The eighth question: How to do well fit?

The core of adaptation is to ensure that content is displayed at different screen resolutions, often in the form of REM, Media Query, and Js+css, without a set of immutable adaptation schemes that often require a variety of combinations. If it is a relatively simple display class H5, you can refer to the following code:

Of course, the tip of the horizontal screen is indispensable:

However, in iphone4/4s this small screen, you can also try to cancel the split screen slide, directly with the browser native scrolling.

　Question Nineth: ...

We may also encounter the following situations:

Share to all social platforms (ready to share guided floats)

Use custom fonts (font spider, fontmin)

Picture resources automatically merged into Sprite (Compass)

believe that for most UI development, write an Android, no compatibility issues page is the best wish, sometimes even for IOS and Android to write a set of code, seemingly heavy workload, in fact, can avoid a lot of unnecessary trouble. It also needs to be consistent with the degradation of the product and the designers ' experience on Android, so that the page does not produce the expected drop.

In the pursuit of best practices on the road, there will always be endless problems. In other things, can not be exhaustive, sliding screen is only a form, content is the essence of H5, do not trifles. Now can see more and more creative into the H5 (video, Canvas, SVG, etc.), the front-end world has become more and more colorful, this is a chance for developers and challenges, you and I share!