javascript Slip.js implements full-screen sliding mobile webpage

javascript Slip.js implements full-screen sliding mobile webpage_javascript skills

WBOY

Release： 2016-05-16 15:29:50

Original

1423 people have browsed it

With Slip.js, you only need to write HTML and CSS. If the logic is simple, it can be done with one line of JS code, which greatly improves the efficiency of development. Not to brag, I wrote the demo above in less than half an hour.

How to do it specifically? For example, there is a requirement:

We have 4 pages, each page has a picture, and every time your finger slides, the entire screen switches.

Look at the HTML first:

<!doctype html>
...
<script type="text/javascript" src="slip.js"></script>
<body>
...
<div id="container">
 <div class="page page-1"><img src="img/1.png"></div>
 <div class="page page-2"><img src="img/2.png"></div>
 <div class="page page-3"><img src="img/3.png"></div>
 <div class="page page-4"><img src="img/4.png"></div>
</div>
</body>

Copy after login

Last look at JS:

var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);

Copy after login

Commentary:

Slip: A method exposed to the whole world. As long as you introduce slip.js, you can get this practical and awesome method.
container: The container being slid contains each sliding page.
'y': The direction of page sliding, you can also pass in 'x'.
webapp: How to set the page to display as a full-screen sliding page.
pages: List of page elements.

It’s all done with one line of code:

Slip(document.getElementById('container'), 'y').webapp();
You can find that the above line of code does not define pages:

When the webapp method does not pass parameters, Slip will obtain the direct child elements (son elements) of the container as pages.

At this point, a full-screen sliding web page is completed, which is unimaginably simple and fast. It takes me half an hour, but you should be able to do it in 10 minutes.

Of course: Slip.js has many more powerful functions. For example, you can define what to do when the page slides. PM saw that you completed it so quickly, so I added very interesting requirements for you:

When the page slides to the last page, refresh it. . .

You only need to add a few lines of code to get it done:

Slip(document.getElementById('container'), 'y').webapp().end(function() {
 if (this.page === 3) location.reload();
});

Copy after login

Look, isn’t it very simple? Is it completed before I even have time to complain about this requirement? Isn’t it an unprecedented pleasure?

The above is the entire content of this article. I hope you all 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.