浅谈一下关于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 的 ...
随机推荐
- CUtilityCode
(1) 基于boost的生产者/消费者队列 template<typenameData> classconcurrent_queue { private: std::queue<Da ...
- Socket与Http通信
HTTP(超文本传输协议): HTTP是应用层协议,主要用于解决数据包装的问题. HTTP协议是建立在TCP协议之上的一种应用. HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应,在 ...
- Web服务之LNMMP架构及动静分离实现
原文链接:http://hoolee.blog.51cto.com/7934938/1413346 讲的非常详细,尽管我只看动静分离,可是看了一下其他的部署,也是非常不错,适合新手 一.LNMMP ...
- win7 64位 asp+access 数据库连接出错[代码：02]，请检查数据库链接文件中的连接字串
解决办法,启用32位应用程序改为true 打开“Internet 信息服务(IIS)管理器”,在最右边的窗口中点击“应用程序池”,在用到的应用程序池上点击右键,选择“高级设置”
- C++之路进阶codevs1269（匈牙利游戏）
1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description ...
- windows shell api SHEmptyRecycleBin 清空回收站
HRESULT SHEmptyRecycleBin( HWND hwnd, LPCTSTR pszRootPath, DWORD dwFlags ); hwnd 父窗口句柄 pszRootPath 将 ...
- Elasticsearch 聚合
桶(bucket)聚合 满足条件的结果集合.桶可以嵌套 标(metric)聚合 满足条件的结果集合的一些指标.如count,max等.
- iOS socket 笔记
ios 客服端: 下载 AsyncSocket 开发框架,拖到项目中 //建立 #import "ViewController.h" #import <sys/socket. ...
- android下面使用SurfaceView+ mediaPlayer播放视频
final SurfaceView surfaceView = new SurfaceView(StartupActivity.this); StartupActivity.this.mediaPla ...
- VS 与JIRA Bamboo的连接
atlassian-vs-connector 可以百度下地址 一些配置 效果: