iscroll
官网
http://cubiq.org/iscroll-5
简单demo
html
<body onload="loaded()">
<div id="nav">MaRain导航栏</div>
<div id="wrapper">
<div id="scroller">
<ul >
<li class="item1">列表 001</li>
<li class="item2">列表 002</li>
<li class="item3">列表 003</li>
<li class="item4">列表 004</li>
<li class="item5">列表 005</li>
<li class="item6">列表 006</li>
<li class="item7">列表 007</li>
<li class="item8">列表 008</li>
<li class="item9">列表 009</li>
<li class="item10">列表 010</li>
<li class="item11">列表 011</li>
<li class="item12">列表 012</li>
<li class="item13">列表 013</li>
<li class="item14">列表 014</li>
<li class="item15">列表 015</li>
<li class="item16">列表 016</li>
<li class="item17">列表 017</li>
<li class="item18">列表 018</li>
<li class="item19">列表 019</li>
<li class="item20">列表 020</li>
<li class="item21">列表 021</li>
<li class="item22">列表 022</li>
<li class="item23">列表 023</li>
<li class="item24">列表 024</li>
<li class="item25">列表 025</li>
<li class="item26">列表 026</li>
<li class="item27">列表 027</li>
<li class="item28">列表 028</li>
<li class="item29">列表 029</li>
<li class="item30">列表 030</li>
<li class="item31">列表 031</li>
<li class="item32">列表 032</li>
</ul>
</div>
</div>
<div id="footer">
底部Copyright © 2017
</div>
css
*{
padding: 0;
margin: 0;
}
#nav{
position: absolute;
left: 0;
width: 100%;
color: #fff;
text-align: center;
line-height: 45px;
height: 45px;
font-size: 18px;
background: #f03;
}
#footer{
position: absolute;
bottom:0 ;
width: 100%;
color: #fff;
text-align: center;
line-height: 45px;
height: 45px;
font-size: 18px;
background: #f03;
}
#wrapper{
position: absolute;
top: 45px;
bottom:45px;
width: 100%;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
javascript
<script src="iscroll.js"></script>
<script>
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
}
</script>
就可以实现一个滑动效果
文档
极客学院的文档:
http://wiki.jikexueyuan.com/project/iscroll-5/versions.html
遇到的问题
问题描述:在使用iscroll.js做页面时,在移动端滚动过程中想点击让滑动停止,却会触发点击效果,造成每次滑动完成,页面都跳转。虽然说这个用户习惯有关,但是每次滑动想停止都会跳转确实不理想。
文档说不要打开click 用tap 自定义的方法。但是这个不知道怎么来定义。而且我还用了vue,绑定了v-on:click
方法。滑动的click 关掉就不触发了。应该怎么来做,哪位大神可以指导一下,不胜感激。