iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。一般用来做 例如：上拉加载、下拉刷新.
IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。
官网http://iscrolljs.com，GitHub地址https://github.com/cubiq/iscroll/
用这个插件的关键是实例化，几种写法
-
var myScroll = new IScroll('#wrapper');
-
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
-
var myScroll = new IScroll(‘.wrapper’);选择单个元素
简单用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/plugin/mock.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
flex-direction: column;
}
header,footer{
height: 45px;
line-height: 45px;
text-align: center;
background: orange;
}
section{
flex: 1;
overflow: hidden;
}
li{
height: 80px;
border-bottom:1px solid pink;
}
nav{
height: 50px;
background: #ccc;
overflow: hidden;
}
span{
float: left;
width: 100px;
border-left: 1px solid green;
height: 50px;
line-height: 50px;
text-align: center;
}
p{
width: 800px;
overflow: hidden;
}
</style>
<!--5.解决IScroll在高版谷歌加载时候页面卡顿问题-->
<script>window.PointerEvent = void 0</script>
</head>
<body>
<header>头部</header>
<section>
<ul>
<li>111111</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>22222</li>
</ul>
</section>
<footer>底部</footer>
</body>
<!--1.引文件-->
<script src="../js/plugin/iscroll.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//3.准备数据
Mock.mock("http://www.baidu.com",{
"user|8-18":[
{
"id|+1":0,
"name":"@cname",
"email":"@email"
}
]
})
//2.实例化
var myScroll=new IScroll('section',{})
//4.请求数据
$.ajax({
type:"get",
url:"http://www.baidu.com",
dataType:'json',
success:function(data){
console.log(data.user)
data.user.map(function(item){
$('ul').append('<li>'+item.name+'</li>')
})
//刷新，页面节点改变的话就需要刷新
myScroll.refresh()
}
})
</script>
</html>
注：
- 当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的onload事件中启动它
-
如果你有一个复杂的DOM结构，最好在onload事件之后适当的延迟，再去初始化iScroll。最好给浏览器100或者200毫秒的间隙再去初始化iScroll。
-
<script>window.PointerEvent = void 0</script> 用来解决移动端使用iscroll在高版Chrome浏览器中卡顿的问题。
-
配置iScroll var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true }); // iScroll初始化时开启鼠标滚轮支持和滚动条支持。默认纵向滚动，如果需要横向 配置 scrollX：true
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/plugin/mock.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
flex-direction: column;
}
header,footer{
height: 45px;
line-height: 45px;
text-align: center;
background: orange;
}
section{
flex: 1;
overflow: hidden;
}
li{
height: 80px;
border-bottom:1px solid pink;
}
nav{
height: 50px;
background: #ccc;
overflow: hidden;
}
span{
float: left;
width: 100px;
border-left: 1px solid green;
height: 50px;
line-height: 50px;
text-align: center;
}
p{
width: 800px;
overflow: hidden;
}
</style>
<!--5.解决IScroll在高版谷歌加载时候页面卡顿问题-->
<script>window.PointerEvent = void 0</script>
</head>
<body>
<header>头部</header>
<nav>
<p>
<span>aaa</span>
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
<span>bbb</span>
</p>
</nav>
<section>
<ul>
</ul>
</section>
<footer>底部</footer>
</body>
<!--1.引文件-->
<script src="../js/plugin/iscroll.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//3.准备数据
Mock.mock("http://www.baidu.com",{
"user|8-18":[
{
"id|+1":0,
"name":"@cname",
"email":"@email"
}
]
})
//2.实例化
var myScroll=new IScroll('section',{})
//横向
var myScroll1=new IScroll('nav',{
scrollX:true
})
//4.请求数据
$.ajax({
type:"get",
url:"http://www.baidu.com",
dataType:'json',
success:function(data){
data.user.map(function(item){
$('ul').append('<li>'+item.name+'</li>')
})
//刷新，页面节点改变的话就需要刷新
myScroll.refresh()
}
})
</script>
</html>
4.refresh()－当滚动区间的节点数量发生改变，必须刷新，重绘滚动条。
5.iScroll存储了很多有用的信息，可以使用它们来增强你的应用。
myScroll.x/y，当前位置 0往负值，myScroll.y相当于y轴的负轴，myScroll.x相当于x轴的负轴
myScroll.directionX/Y，最后的方向 (-1 down/right, 0 still, 1 up/left) myScroll.directionX/Y往左/上拉是-1，往右/下拉是1
myScroll.maxScrollX 当滚动到右侧时的 myScroll.x/y
myScroll.maxScrollY当滚动到底部时的 myScroll.x/y
$('footer').click(function(){
console.log(myScroll1.x,myScroll.y)
console.log(myScroll1.directionX,myScroll.directionY)
console.log(myScroll1.maxScrollX,myScroll.maxScrollY)
})应用
$(document).on('touchend',function(){
if(myScroll.y>50){
console.log('下拉刷新')
}
if(myScroll.y<myScroll.maxScrollY-50){
console.log('上拉加载')
}
})6.在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存
myScroll.destroy();
scrollTo(x,y,time)滚动位置 速度
$('footer').click(function(){
myScroll.scrollTo(0,0,1000) //回到顶部
myScroll.destroy() //销毁
})7.上面再用iscroll上拉和下拉时都会有警告，解决办法是给body添加css3提供的样式 touch-action: none;
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/plugin/mock.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
flex-direction: column;
touch-action: none;
}
header,footer{
height: 45px;
line-height: 45px;
text-align: center;
background: orange;
}
section{
flex: 1;
overflow: hidden;
}
li{
height: 80px;
border-bottom:1px solid pink;
}
nav{
height: 50px;
background: #ccc;
overflow: hidden;
}
span{
float: left;
width: 100px;
border-left: 1px solid green;
height: 50px;
line-height: 50px;
text-align: center;
}
p{
width: 800px;
overflow: hidden;
}
</style>
<!--5.解决IScroll在高版谷歌加载时候页面卡顿问题-->
<script>window.PointerEvent = void 0</script>
</head>
<body>
<header>头部</header>
<nav>
<p>
<span>aaa</span>
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
<span>bbb</span>
</p>
</nav>
<section>
<ul>
</ul>
</section>
<footer>底部</footer>
</body>
<!--1.引文件-->
<script src="../js/plugin/iscroll.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//3.准备数据
Mock.mock("http://www.baidu.com",{
"user|8-18":[
{
"id|+1":0,
"name":"@cname",
"email":"@email"
}
]
})
//2.实例化
var myScroll=new IScroll('section',{})
//横向
var myScroll1=new IScroll('nav',{
scrollX:true
})
//4.请求数据
$.ajax({
type:"get",
url:"http://www.baidu.com",
dataType:'json',
success:function(data){
data.user.map(function(item){
$('ul').append('<li>'+item.name+'</li>')
})
//刷新，页面节点改变的话就需要刷新
myScroll.refresh()
}
})
$('footer').click(function(){
console.log(myScroll1.x,myScroll.y)
console.log(myScroll1.directionX,myScroll.directionY)
console.log(myScroll1.maxScrollX,myScroll.maxScrollY)
myScroll.scrollTo(0,0,1000) //回到顶部
myScroll.destroy() //销毁
})
$(document).on('touchend',function(){
if(myScroll.y>50){
console.log('下拉刷新')
}
if(myScroll.y<myScroll.maxScrollY-50){
console.log('上拉加载')
}
})
</script>
</html>
833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
