Before writing such a page may also struggle to choose what library, and then write a bunch touch of events, coupled with writing style to write HTML, it may be a few hours to the past, it is completed.
It's not the same now.
With Slip.js , you just write html,css, if logic is simple, a line of JS code can be done, greatly improve the efficiency of development. No bragging, the above demo, in less than half an hour I will write well.
How do you do it specifically? For example, there is a requirement:
We have 4 pages, one for each page, and one for each finger swipe.
First 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>
Look at CSS again:
/* 按自己需要来定义吧，不写也没关系 */
Last Look at JS:
var container = document.getElementById(‘container‘);var pages = document.querySelectorAll(‘.page‘);var slip = Slip(container, ‘y‘).webapp(pages);
As simple as this, you can see the effect.
Explanation:
Slip: Exposure to the global approach, as long as you introduce slip.js , you can get this practical method.
container: The container being slid, inside is each sliding page.
‘y‘: page swipe direction, you can also pass in ‘x‘ .
webapp: Sets the way the page is displayed as a full screen slide.
pages: A list of page elements.
A good line of code is done:
Slip(document.getElementById(‘container‘), ‘y‘).webapp();
You can see that the preceding line of code is not defined pages :
When a webapp method does not pass a parameter, slip acquires container the immediate child element (the son element) as the pages .
At this point, a full-screen sliding Web page is complete, difficult to imagine simple and fast. I'll take half an hour, you should be there in 10 minutes.
Of course: Slip.js There are many more powerful features, such as what you can do to define your own page sliding, PM to see what you have done so quickly, you have added a very interesting demand:
When the page slides to the last page, refresh ...
You just 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();});
See, is not very simple, is not enough to complain about this demand, has finished it, is not an unprecedented thrill. Let's take a look at the effect.
Note: The number of pages starts at 0 , so the last page above is 3, not 4.
If you see that you haven't left here, I think you Slip.js should be at least a bit interested, so you can go to GitHub and watch it.
If you want to try Slip.js it urgently, you can view the document directly.
If you want to see Slip.js how it is implemented, you can view the source.
(reprint) Use Slip.js to quickly create a full-screen sliding mobile Web page
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
