浅谈一下关于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 的 ...
随机推荐
- NET基础（3）：is 和 as 操作符
在C#语言中进行类型转换的另外一种方式是使用is和as操作符.is检查对象是否兼容于指定类型,返回Boolean值true或false.注意,is操作符永远不抛出异常,例如以下代码: Object o ...
- css元素排列
有时候元素的排列没有预想的效果,考虑是不是margin和padding的影响
- hduoj 1455 && uva 243 E - Sticks
http://acm.hdu.edu.cn/showproblem.php?pid=1455 http://uva.onlinejudge.org/index.php?option=com_onlin ...
- 。。。学习CSS3的第一个属性border-radius。。。
学习border-radius,感觉这个文档写的很不错: http://blog.sina.com.cn/s/blog_61671b520101gelr.html
- IP地址数据库-ISP运营商列表(2017年1月)
IP地址数据库 微信号:qqzeng-ip [全球旗舰版][国内精华版][国外拓展版][英文版][掩码版] http://qqzeng.com 中国大陆:三大基础运营商 中国电信中国联通中国 ...
- Linux下常用yum命令
linux各发行版有多种包管理机制,下面介绍基于RedHat系的yum包管理命令: yum -y install xxx 无需询 ...
- JAVA 学习随笔 ： JDK Enhancement Process JEP process
是时候寻找一个学习JAVA的路径了 ---- JDK Enhancement Process Oracle发布了JDK增强提案与路线图进程,目的在于鼓励OpenJDK提交者贡献点子和扩展以改进Open ...
- Install Jenkins Slave as Windows Service
https://wiki.jenkins-ci.org/display/JENKINS/Installing+Jenkins+as+a+Windows+service SC 直接创建windows s ...
- Adressing
- PhpStorm设置编码
PhpStorm是一个轻量级且便捷的PHP IDE,其旨在提供用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查. 本文为大家讲解的是如何设置phpstorm 编辑器的编码,感 ...