javascript Slip.js实现整屏滑动的手机网页


Posted in Javascript onNovember 25, 2015

有了Slip.js,你只管写HTML,CSS,如果逻辑简单,一行JS代码就可以搞定,大大提升了开发的效率。不吹牛,上面的demo,不到半小时我就写好了。

具体怎么做呢?比如有个需求是:

我们有4个页面,每个页面有一张图片,每次手指滑动都切换一整屏。

首先看HTML:

<!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>

最后看JS:

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

解说:

  • Slip:暴露到全局的方法,只要你引入slip.js,就可以得到这个实用牛逼的方法。
  • container: 被滑动的容器,里面是每个滑动页面。
  • 'y': 页面滑动的方向,你也可以传入'x'。
  • webapp: 设置页面展现为全屏滑动页面的方法。
  • pages: 页面元素列表。

说好的一行代码搞定的:

Slip(document.getElementById('container'), 'y').webapp();
可以发现,上面的一行代码并没有定义pages:

当webapp方法不传递参数的时候,Slip会获取container的直接子元素(儿子元素)作为pages。

至此,一个全屏滑动网页就完成了,难以想象的简单快速。我用半小时,你10分钟应该就可以。

当然:Slip.js还有很多更强大的功能,比如你可以自己定义页面滑动时要做什么,PM看你完成的这么快,就给你加了很有意思的需求:

当页面滑动到最后一页的时候,刷新一下。。。

你只需要加几行代码就可以搞定:

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

看,是不是很简单,是不是还没来得及抱怨这个需求,就已经完成它了,是不是有种前所未有的快感。

以上就是本文的全部内容,希望大家喜欢,这篇文章只是一个开始,之后会有更加全面精彩的文章等着大家,希望大家不要错过。

Javascript 相关文章推荐
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
chrome原生方法之数组
Nov 30 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
vue实现井字棋游戏
Sep 29 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 #Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 #Javascript
js获取图片宽高的方法
Nov 25 #Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 #Javascript
javascript常用经典算法实例详解
Nov 25 #Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 #Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 #Javascript
You might like
php mssql 时间格式问题
2009/01/13 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
深入解析Python中的集合类型操作符
2015/08/19 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python实现多线程的两种方式分析
2018/08/29 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
python dict乱码如何解决
2020/06/07 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
职业培训师职业生涯规划
2014/02/18 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
法人委托书范本格式
2014/09/15 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书