iscroll5.0的使用
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/rem.js"></script>
<script src="js/iscroll.js"></script>
<script type="text/javascript" src="js/demoUtils.js"></script>
<script type="text/javascript" src="js/iscroll-zoom.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html{
font-size: 100px;
}
.header{
width: 7.5rem;
height: 1rem;
line-height: 1rem;
text-align: center;
font-size: 0.4rem;
color: #fff;
background: #000;
position: absolute;
top: 0;
left: 0;
}
#wrapper{
width: 7.5rem;
height: 3rem;
position: absolute;
overflow: hidden;
top: 1.1rem;
left: 0;
}
ul{
width: 7.5rem;
overflow: hidden;
position: absolute;
}
li{
width: 7.5rem;
height: 3rem;
background: red;
text-align: center;
line-height: 3rem;
color: #fff;
font-size: 0.8rem;
}
.iScrollVerticalScrollbar {
position: absolute;
z-index: 9999;
width: 16px;
bottom: 2px;
top: 2px;
right: 2px;
overflow: hidden;
}
.iScrollVerticalScrollbar.iScrollBothScrollbars {
bottom: 18px;
}
.iScrollVerticalScrollbar .iScrollIndicator {
width: 100%;
background: -moz-linear-gradient(top, #cc3f6e 0%, #93004e 100%);
background: -webkit-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
background: -o-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
background: -ms-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
background: linear-gradient(to bottom, #cc3f6e 0%,#93004e 100%);
}
</style>
<body>
<header class="header">ISCROLL</header>
<div id="wrapper">
<ul>
<li id="tap">1</li>
<li style="background: blue">2</li>
<li style="background: pink">3</li>
<li style="background: gray">4</li>
</ul>
</div>
<div style="position: absolute;bottom: 1rem;left: 1rem;">
<button class="btn1">滚动到固定位置</button>
<button class="btn2">上一页</button>
<button class="btn3">下一页</button>
<button class="btn4">缩放</button>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var myScroll = new IScroll('#wrapper',{
mouseWheel:true,//鼠标滚动
scrollbars:'custom',//滚动条
interactiveScrollbars:true,//滚动条能拖动
bounce:true,//禁止反弹
scrollX: false,//设置x轴滚动
scrollY: true,//设置y轴滚动
snap:true,//滚动对齐 ，
// zoom:true,//缩放
// wheelAction:'zoom',//滚动的事件为缩放
bindToWrapper:true,// 触摸滚动
bounceTime:1200,//反弹的时间
bounceEasing: 'elastic',//动画的效果
keyBindings: {
pageUp: 33,
pageDown: 34,
end: 35,
home: 36,
left: 37,
up: 38,
right: 39,
down: 40
}
});
// 触摸滚动
// document.addEventListener('touchmove', function (e) { e.preventDefault(); }, isPassive() ? {
// capture: false,
// passive: false
// } : false);
$('.btn1').click(function(){
/*x 和 y呈现你想滚动到横向轴或者纵向轴的页面数。如果你需要在单个唯独上使用滚动条，只需要为你不需要的轴向传递0值。
time属性是动画周期，easing属性是滚动到指定点使用的擦除功能类型。请参考高级功能中的option.bounceEasing。这两个属性都是可选项。*/
myScroll.goToPage(0, 2, 5000);
});
// 上一页
$('.btn2').click(function(){
myScroll.prev();
});
// 下一页
$('.btn3').click(function(){
myScroll.next();
})
// 缩放
$('.btn4').click(function(){
myScroll.zoom(4, 325, 150,1000);
})
// 事件的绑定
myScroll.on('beforeScrollStart',function(){
console.log("用户触摸屏幕但没有楚大滚动")
})
myScroll.on('scrollCancel',function(){
console.log("滚动初始化完成，但没有执行")
})
myScroll.on('scrollStart',function(){
console.log("开始滚动")
})
myScroll.on('scrollStart',function(){
console.log("滚动中")
})
myScroll.on('scrollEnd',function(){
console.log("停止滚动");
// 获取当前滚动的位置
console.log(this.y+"****")
// 获取当前页
console.log(this.currentPage);
// 销毁实例
// myScroll.destroy();
// myScroll = null;
})
myScroll.on('flick',function(){
console.log("用户打开左或右")
})
myScroll.on('zoomStart',function(){
console.log("开始缩放")
})
myScroll.on('zoomEnd',function(){
console.log("缩放结束")
})
}
</script>
网友评论