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 09 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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
使用php4加速网络传输
2006/10/09 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
深入浅析php json 格式控制
2015/12/24 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python中的五种异常处理机制介绍
2014/09/02 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python装饰器用法实例分析
2019/01/14 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
中等生评语大全
2014/05/04 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
2015元旦节寄语
2014/12/08 职场文书
国博复兴之路观后感
2015/06/02 职场文书
我的中国梦主题班会
2015/08/14 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers