Home > Developer > JavaScript
Javascript Slip. js enables full-screen sliding of mobile phone pages, and javascriptslip. js
With Slip. js, you only need to write HTML and CSS. If the logic is simple, a line of JS code can be done, greatly improving the development efficiency. Don't brag. I wrote the demo above in less than half an hour.
How can this problem be solved? For example, you may need:
We have four pages. Each page has an image, and the screen is switched every time the fingers slide.
First, let's look at HTML:
<!doctype html>...<script type="text/javascript" src="slip.js"></script><body>...<div id="container"> <div class="page page-1"></div> <div class="page page-2"></div> <div class="page page-3"></div> <div class="page page-4"></div></div></body>
Finally, let's look at JS:
var container = document.getElementById('container');var pages = document.querySelectorAll('.page');var slip = Slip(container, 'y').webapp(pages);
Explanation:
A good line of code is done:
Slip (document. getElementById ('Container'), 'y'). webapp ();
We can see that the previous line of code does not define pages:
When the webapp method does not pass parameters, Slip will obtain the direct child element (son element) of the iner as pages.
So far, a full-screen sliding web page is complete, which is hard to imagine, simple and fast. It takes me half an hour. You can do it in 10 minutes.
Of course: Slip. js also has many more powerful functions. For example, you can define what to do during page sliding. PM adds interesting demands to you as soon as you are done:
When the page slides to the last page, refresh it...
You only need to add a few lines of code:
Slip(document.getElementById('container'), 'y').webapp().end(function() { if (this.page === 3) location.reload();});
Check whether it is very simple. If you have not complained about this demand before, you have already completed it. Is there an unprecedented pleasure.
The above is all the content of this article. I hope you will like it. This article is just the beginning, and there will be more comprehensive and exciting articles waiting for you. I hope you will not miss it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
