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

    (1) 基于boost的生产者/消费者队列 template<typenameData> classconcurrent_queue { private: std::queue<Da ...

  2. Socket与Http通信

    HTTP(超文本传输协议): HTTP是应用层协议,主要用于解决数据包装的问题. HTTP协议是建立在TCP协议之上的一种应用. HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应,在 ...

  3. Web服务之LNMMP架构及动静分离实现

    原文链接:http://hoolee.blog.51cto.com/7934938/1413346 讲的非常详细,尽管我只看动静分离,可是看了一下其他的部署,也是非常不错,适合新手 一.LNMMP  ...

  4. win7 64位 asp+access 数据库连接出错[代码:02],请检查数据库链接文件中的连接字串

    解决办法,启用32位应用程序改为true 打开“Internet 信息服务(IIS)管理器”,在最右边的窗口中点击“应用程序池”,在用到的应用程序池上点击右键,选择“高级设置”

  5. C++之路进阶codevs1269(匈牙利游戏)

    1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond       题目描述 Description ...

  6. windows shell api SHEmptyRecycleBin 清空回收站

    HRESULT SHEmptyRecycleBin( HWND hwnd, LPCTSTR pszRootPath, DWORD dwFlags ); hwnd 父窗口句柄 pszRootPath 将 ...

  7. Elasticsearch 聚合

    桶(bucket)聚合 满足条件的结果集合.桶可以嵌套 标(metric)聚合 满足条件的结果集合的一些指标.如count,max等.

  8. iOS socket 笔记

    ios 客服端: 下载 AsyncSocket 开发框架,拖到项目中 //建立 #import "ViewController.h" #import <sys/socket. ...

  9. android下面使用SurfaceView+ mediaPlayer播放视频

    final SurfaceView surfaceView = new SurfaceView(StartupActivity.this); StartupActivity.this.mediaPla ...

  10. VS 与JIRA Bamboo的连接

    atlassian-vs-connector 可以百度下地址 一些配置     效果: