With that, you just write HTML and CSS. If the logic is simple, a line of JS code can be done, which greatly improves the efficiency of development. Don't brag, I finished writing the demo on it in less than half an hour.
How to do it specifically? For example, there is a requirement:
We have 4 pages, each with an image, and every time we swipe our fingers, we switch to a full screen.
First look at HTML:
<!doctype html> ... <script type="text/javascript" src=""></script> <body> ... <div > <div class="page page-1"><img src="img/"></div> <div class="page page-2"><img src="img/"></div> <div class="page page-3"><img src="img/"></div> <div class="page page-4"><img src="img/"></div> </div> </body>
Finally, look at JS:
var container = ('container');
var pages = ('.page');
var slip = Slip(container, 'y').webapp(pages);
Commentary:
- Slip：The method exposed to the global situation can be obtained as long as you introduce it.
- container:The container being slided, inside is each sliding page.
- 'y': You can also pass in 'x' in the direction of the page sliding.
- webapp: Set the method to display the page as a full-screen sliding page.
- pages: List of page elements.
The promised line of code is done:
Slip(('container'), 'y').webapp();
It can be found that the above line of code does not define pages:
When the webapp method does not pass parameters, Slip will obtain the container's direct child element (son element) as pages.
At this point, a full-screen sliding web page is completed, unimaginably simple and fast. I'll use it for half an hour, and you should be able to do it for 10 minutes.
Of course: there are many more powerful functions, such as you can define what to do when the page is swiping by yourself. PM depends on how fast you complete it, so it adds interesting requirements to you:
When the page slides to the last page, refresh. . .
You only need to add a few lines of code to do it:
Slip(('container'), 'y').webapp().end(function() {
if ( === 3) ();
});
See, is it very simple, is it done before you can complain about this need, and is it an unprecedented pleasure?
The above is the entire content of this article. I hope you like it. This article is just the beginning. There will be more comprehensive and exciting articles waiting for you in the future. I hope you don’t miss it.