浅谈一下关于iscroll的使用心得
因为最近的项目所有页面老板想做成苹果原生那种上下拉动有回弹效果的体验，浏览器自带是没有这种功能的，自己写的话兼容性可能会出大问题，要适配安卓的各种机型实在是难，所以我还是选择去使用移动端相对比较稳定的iscroll.js这个插件来实现。。
刚开始使用的是iscroll4的版本，确实坑很多，但又没办法，只要一点一点来填。后来项目快做完了，问题也解决的差不多了，听到群里面有人开始在使用iscorll5的版本，性能还不错，就是兼容性不强，低版本的安卓机可能体验很不流畅，于是自己开始琢磨，就有了这篇文章。
以下是我在项目中的使用心得
iscoll4-------------------
更新了一下iscroll4的demo---------------------------------------------2016.11.14
<!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是可以跑起来的。
需要使用这个文件配合使用
把需要滚动的区域放置ul中
<div id = "wrapper">
<ul>
</ul>
</div>
css的样式重点在于
#wrapper{
width:100%;
height:100%;
position:absolute;
z-index:1;
}
引入下面的js
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);
}
iscroll有个问题就是：它会与swiper的轮播图冲突，只要轮播图滑动就会直接跳链接，解决的方案就是给swiper里面配置一个阻止touchmove冒泡事件的属性 touchMoveStopPropagation : false, 这样就能解决问题。
下面介绍iscroll5demo------------------------iscroll5的js大家可以去网上下载
<!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>
这是一个测试DOME,iscroll5使用结构和上述一样，而且不会和swiper冲突，可以采用flexbox来布局，但在一些低端机上面会出现上下滑很卡顿的情况，目前不清楚是因为布局的原因还是iscroll5的原因，有待进一步测试。
----------------------------------------------------------------------------------------------------------------2016.9.12
1.页面在移动端滚动条移动变得非常卡，最后加上了document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);滚动条变得很流畅 还可以加上css样式 给scroll元素增加css样式：-webkit-transform:translate3d(0,0,0);.
2.关于页面在不刷新的情况下如果添加了新的模块或者高度发生了变化会导致无法下拉的情况，使用iscroll5可以解决这个问题，就是在你触发了变化的事件之后，加上myscroll.refresh(); 去调用它自带的刷新方法。
------------------------2016.10.8
