因为最近的项目所有页面老板想做成苹果原生那种上下拉动有回弹效果的体验,浏览器自带是没有这种功能的,自己写的话兼容性可能会出大问题,要适配安卓的各种机型实在是难,所以我还是选择去使用移动端相对比较稳定的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>

index.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

浅谈一下关于iscroll的使用心得的更多相关文章

  1. 朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招

    朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招 概览 标题中的高并发架构设计是指设计一套比较合适的架构来应对请求.并发量很大的系统,使系统的稳定性.响应时间符合预期并且能在极端的情况下自 ...

  2. 浅谈程序员创业(要有一个自己的网站,最好的方式还是自己定位一个产品,用心把这个产品做好。或者满足不同需求的用户,要有特色)good

    浅谈程序员创业 ——作者:邓学彬.Jiesoft 1.什么是创业? 关于“创业”二字有必要重新学习一下,找了两个相对权威定义: 创业就是创业者对自己拥有的资源或通过努力能够拥有的资源进行优化整合,从而 ...

  3. 浅谈Windows API编程

    WinSDK是编程中的传统难点,个人写的WinAPI程序也不少了,其实之所以难就难在每个调用的API都包含着Windows这个操作系统的潜规则或者是windows内部的运行机制…… WinSDK是编程 ...

  4. 浅谈-对modbus的理解

    浅谈-对modbus的理解 一.简介 Modbus由MODICON公司于1979年开发,是一种工业现场总线协议标准.1996年施耐德公司推出基于以太网TCP/IP的Modbus协议:ModbusTCP ...

  5. 【转载】MIMO技术杂谈(一):鱼与熊掌能否兼得?--浅谈分集与复用的权衡

    原文链接(向作者致敬):http://www.txrjy.com/thread-667901-1-1.html   无线通信世界在过去的几十年中的发展简直是爆发式的,MIMO(多发多收)技术的出现更是 ...

  6. 多测师浅谈 学员实现价值就是我们的幸福_高级讲师肖sir

    学员实现价值就是我们的幸福 作为一名资深的IT高级讲师,在传统的行业IT薪资基本都是过万,作为一名IT培训教师,培养出在不同领域的测试,并且接触各种各样的产品,目前市场流行的比如银行业务系统,语音类系 ...

  7. 浅谈.Net Core中使用Autofac替换自带的DI容器

    为什么叫 浅谈 呢?就是字面上的意思,讲得比较浅,又不是不能用(这样是不对的)!!! Aufofac大家都不陌生了,说是.Net生态下最优秀的IOC框架那是一点都过分.用的人多了,使用教程也十分丰富, ...

  8. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  9. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

随机推荐

  1. Thinkphp3.2----------------Thinkphp3.2的目录结构介绍

    ThinkPHP框架目录结构\index.php         入口文件\Application     应用目录\Public         资源文件目录\ThinkPHP         框架 ...

  2. Unity: Invalid serialized file version xxx Expected version: 5.3.4f1. Actual version: 5.3.5f1.

    Unity发布安卓项目,如果直接使用Unity打包APK一切Ok,导出Google项目 使用Idea打包 一进去直接Crash. 报错: 1978-2010/? E/Unity﹕ Invalid se ...

  3. 计蒜客A

      联想公司最近要设计一个体现公司文化的 logo.联想的设计师想出了一个方案:先画了一个顶点 O,接着画出以顶点 O 为公共顶点的.夹角为 θ的两条线段 l1​​ 和 l2 其中 l1作为圆 C1的 ...

  4. 打开QQ会话

    Android:String url="mqqwpa://im/chat?chat_type=wpa&uin=123456";startActivity(new Inten ...

  5. jquery jQuery-File-Upload 例子

    网上jquery-file-upload的例子 都过于简单,在项目中这个插件经常使用,写个例子供参考. 下面介绍 用插件实现图片异步上传的代码. 1   比要的js一个都不能少,他们之间是有依赖关系的 ...

  6. 家教O2O维护“老师”的逼格,算不尊重市场吗

    既然做O2O,本身就是把这当服务业的.出钱的人才是老大.老师受到尊重是因为你传授的东西他人认可,而不该是因为“老师”两个字.另外,成年人会去请家教的,往往是自己有一些长处的.你只是一方面的老师,人家可 ...

  7. nginx,控浏览器缓存,前端优化方案

    1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...

  8. 4.Git的安装

    最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Window ...

  9. CSS3 3D轮播主要可以分成这样的三类

    中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...

  10. eclipse中 将java项目转换为web项目

    来自:http://jadethao.iteye.com/blog/1331308 eclipse中 将java项目转换为web项目 1.找到项目工作空间目录,打开.project文件,并修改文件,  ...