Pain points on the app activity page

You need to do a small activity on the app project, first look at the page layout

The requirement is that these 5 plates are displayed one by two, and the whole page scrolls up a certain distance.

At the beginning of the consideration, is to prepare to rely on the CSS3 property of the transition implementation, including the sequential delay is not any problem, but until the real implementation, found unable to listen to each module display, the scroll bar to achieve the scroll. (or because I didn't think about how to monitor it)

Then the rest of the road is SetInterval and SetTimeout, the first thought is setinterval, because there are multiple modules, each show, nature is open interval timer (setinterval), implementation, found two problems, One is unable to turn off the timer at the appropriate time; the second problem is that the direct operation of the scroll bar scrolling, there is no easing effect, looks particularly stiff feeling.

The first problem, it is easy to solve, replace the delay timer settimeout, each module delay is not the same time, the problem is solved one by one.

Operation of the scroll bar, need to ease the effect, it is compared to the pit.

discussed for a long time, found that if the direct operation of the page scroll bar, there is no way to achieve ease. Forced to change ideas:

Easing, only the motion function and the animation,transition of the CSS has the easing function, then it is a definite scheme.

If you use the motion function, you definitely need to locate, then the page's own scroll bar may not be used.

CSS scheme, it is necessary to follow the scroll of the sub-elements to achieve a similar to the entire document.body scroll upward, but also a big pain point.

Finally decided to adopt the CSS scheme, with the delay timer, each show a module, similar to the Document.body box model, I adopted a. Main wraps all the elements, so I'm going to slide up here. Main,

. Main the distance you swipe up is equal to the distance each module needs to slide multiplied by the ordinal of the current element.

$ ('. Main '). css ({    ' transform ': '-webkit-translatey (-' + * * i+ ' px) ', '    transform ': ' Translatey (-' + * i+ ' px) ',    ' transition ': '-webkit-transform 800ms ease-in-out ',    ' transition ': ' Transform 800ms ease-in-out '});

When all the modules are shown, there is actually a lazy way to find out how to monitor the last module has shown a complete solution.

SetTimeout (function () {    $ (document.body). click ();}, 5200);

The fact is to turn on a delay timer, after 5200ms, triggering other required events.

Because of the need for a trigger point, so after 5200ms, with JS to simulate a page click event, within the Click event to achieve all the necessary work.

$ (document.body). On (' click ', Function () {    $ ('. Main '). css ({        ' transform ': '-webkit-translatey (0) ',         ' Transform ': ' Translatey (0) ',         ' transition ': '-webkit-transform 0ms steps (1) ',         ' transition ': ' Transform 0ms Steps (1) '    });    $ ('. Content '). ScrollTop (320);});

In order not to affect the sliding of the page scrollbar, the upward displacement must be reset to 0, and the scroll bar will be scrolled to the current position secretly.

Here the use of transition has a technique, from the current displacement, back to 0, must be completed in one step, can not be seen from the effect of the page scrolling back and forth, so the use of steps (1) properties, but within 0MS.

Here, the basic completion of the requirements, but when I was in the operation of the page, but also found a problem, that is, when the module has not been fully displayed, the user slid the page, the results look less friendly.

So when the module does not show, disable the touch screen sliding events, wait until the page simulates the Click event, then release the touch screen scrolling events.

$ (document.body). On (' Touchmove.move ', function (e) {    e.preventdefault ();    E.stoppropagation ();});

To release the touch screen event:

$ (document.body). Off (' Touchmove.move ')

Basically complete the requirements. It's called finishing the call.

Pain points on the app activity page