浅谈一下关于iscroll的使用心得
因为最近的项目所有页面老板想做成苹果原生那种上下拉动有回弹效果的体验，浏览器自带是没有这种功能的，自己写的话兼容性可能会出大问题，要适配安卓的各种机型实在是难，所以我还是选择去使用移动端相对比较稳定的iscroll.js这个插件来实现。。
刚开始使用的是iscroll4的版本，确实坑很多，但又没办法，只要一点一点来填。后来项目快做完了，问题也解决的差不多了，听到群里面有人开始在使用iscorll5的版本，性能还不错，就是兼容性不强，低版本的安卓机可能体验很不流畅，于是自己开始琢磨，就有了这篇文章。
以下是我在项目中的使用心得
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style>
#wrapper{
width:100%;
height:100%;
position:absolute;
z-index:1;
}
li{
width: 100%;
height: 100px;
background: red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id = "wrapper">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="iscroll.js"></script>
<script type="text/javascript">
var myScroll=new iScroll("wrapper",{
hScrollbar:false,
vScrollbar:false,
onScrollMove: function () {
if((this.y < this.maxScrollY) && (this.pointY < 1)){
this.scrollTo(0, this.maxScrollY, 400);
return;
} else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
this.scrollTo(0, 0, 400);
return;
}
}
}); function Refresh() {
setTimeout(function () {
myScroll.refresh();
}, 1000);
}
</script>
</body>
</html>
其中的iscroll4.js和reset.css文件大家可以从网上下载，这个demo是可以跑起来的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="../reset.css"/>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../swiper.css">
<style>
*{
margin: 0;
padding: 0;
}
body{
background: blue;
}
header{
/*position: fixed;
top: 0;*/
background: red;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 99;
}
#wrap{
/*margin-top:40px;*/
overflow: hidden;
}
section{
background: green;
height: 300px;
margin-bottom: 1px;
color: white;
}
/*#wrapper{
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}*/
html,body{
height: 100%;
overflow: hidden;
} .box{
display:box;
display: -webkit-box;
display: flex;
display:-webkit-flex;
overflow: hidden;
flex-direction: column;
width: 100%;
height:100%;
-webkit-box-orient: vertical;
}
#wrapper{
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1; }
.swiper-container {
width: 100%;
height: 200px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff; display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide a{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<header>导航栏</header>
<div id="wrapper">
<div id="wrap">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="../../3d热气球.html">Slide 1</a></div>
<div class="swiper-slide"><a href="../../3d热气球.html">Slide 2</a></div>
<div class="swiper-slide"><a href="../../3d热气球.html">Slide 3</a></div>
<div class="swiper-slide"><a href="../../3d热气球.html">Slide 4</a></div>
</div> <div class="swiper-pagination"></div>
</div>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
</div>
</div>
</div>
<script src="zepto.js"></script>
<script src="../swiper.js"></script> <script type="text/javascript" src="iscroll.js" ></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true
});
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new IScroll("#wrapper");
},100 );
}
window.addEventListener("load",loaded,false); $("#wrapper").one("touchstart",function(){
myscroll.refresh();
});
</script>
</body>
</html>
index.html
浅谈一下关于iscroll的使用心得的更多相关文章
- 朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招
朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招 概览 标题中的高并发架构设计是指设计一套比较合适的架构来应对请求.并发量很大的系统,使系统的稳定性.响应时间符合预期并且能在极端的情况下自 ...
- 浅谈程序员创业（要有一个自己的网站，最好的方式还是自己定位一个产品，用心把这个产品做好。或者满足不同需求的用户，要有特色）good
浅谈程序员创业 ——作者:邓学彬.Jiesoft 1.什么是创业? 关于“创业”二字有必要重新学习一下,找了两个相对权威定义: 创业就是创业者对自己拥有的资源或通过努力能够拥有的资源进行优化整合,从而 ...
- 浅谈Windows API编程
WinSDK是编程中的传统难点,个人写的WinAPI程序也不少了,其实之所以难就难在每个调用的API都包含着Windows这个操作系统的潜规则或者是windows内部的运行机制…… WinSDK是编程 ...
- 浅谈-对modbus的理解
浅谈-对modbus的理解 一.简介 Modbus由MODICON公司于1979年开发,是一种工业现场总线协议标准.1996年施耐德公司推出基于以太网TCP/IP的Modbus协议:ModbusTCP ...
- 【转载】MIMO技术杂谈（一）：鱼与熊掌能否兼得？--浅谈分集与复用的权衡
原文链接(向作者致敬):http://www.txrjy.com/thread-667901-1-1.html 无线通信世界在过去的几十年中的发展简直是爆发式的,MIMO(多发多收)技术的出现更是 ...
- 多测师浅谈 学员实现价值就是我们的幸福_高级讲师肖sir
学员实现价值就是我们的幸福 作为一名资深的IT高级讲师,在传统的行业IT薪资基本都是过万,作为一名IT培训教师,培养出在不同领域的测试,并且接触各种各样的产品,目前市场流行的比如银行业务系统,语音类系 ...
- 浅谈.Net Core中使用Autofac替换自带的DI容器
为什么叫 浅谈 呢?就是字面上的意思,讲得比较浅,又不是不能用(这样是不对的)!!! Aufofac大家都不陌生了,说是.Net生态下最优秀的IOC框架那是一点都过分.用的人多了,使用教程也十分丰富, ...
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- 浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
随机推荐
- github设置只识别指定类型的文件
原文 # 忽略所有文件 * # 不忽略目录 !*/ # 不忽略文件.gitignore和*.foo !.gitignore !*.foo
- OpenCV整体的模块架构
之前啃了不少OpenCV的官方文档,发现如果了解了一些OpenCV整体的模块架构后,再重点学习自己感兴趣的部分的话,就会有一览众山小的感觉,于是,就决定写出这篇文章,作为启程OpenCV系列博文的第二 ...
- PB函数大全
PB函数大全 Abs()功能计算绝对值.语法Abs ( n )参数n:要得到绝对值的数值型变量或表达式返回值返回值的数据类型与n的数据类型相同,函数执行成功时返回n的绝对值.如果参数n的值为NULL, ...
- web分享QQ好友、QQ空间、新浪微博的api接口
QZone: "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITL ...
- python之在线PK游戏（第六天）
本节作业: 熟练使用类和模块,写一个交互性强.有冲突的程序. 故本次写了一个文字回合制的PK游戏,系统主程序为根目录下的:game_menu.py 1. 系统功能模块: 第六天的作业:文字游戏程序 ...
- jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
jQuery(function ($) { // 备份jquery的ajax方法 var _ajax = $.ajax; // 重写ajax方法,先判断登录在执行succes ...
- c# winform 调用js
1. 在winform中加入一个 WebBrowser 控件: 2. webBrowser控件加载html文件,html文件中包含了js代码, 代码如下(必须在 InitializeComponent ...
- 006_Salesforce Sharing 使用说明
Salesforce Sharing 使用说明 背景说明:Salesforce共享实施记录和其它数据时,需要员工之间共享或多个用户在一个组织间的共享.然而,共享这些数据是有风险的,尤其是当它涉及到敏感 ...
- [转]hibernateTools工具安装及使用总结（eclipse 3.6）
转载地址:http://blueblood79.iteye.com/blog/773177 最近项目采用flex+spring+hibernate的框架开发,之前虽说有多年的Java开发经验了,但是一 ...
- [课程设计]Scrum 3.2 多鱼点餐系统开发进度（页面优化&下单详细信息页面）
Scrum 3.2 多鱼点餐系统开发进度(页面优化&下单详细信息页面) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选 ...