这段时间写的有一个是外卖App的demo,手机端是不支持鼠标滚轮移动的嘛,那么问题就来了,该如何让其实现滑动滚动呢?
这里就涉及到一个新的js插件了——iscroll.js。
对,就是这个小东西。来看看他的用法,附上链接http://wiki.jikexueyuan.com/project/iscroll-5/
链接里写的很清楚啦,看不懂我也没办法哈,在下要开始记录遇到的问题了
首先是如何实现滚动,在武功秘籍里说到,给想要的内容包上一层div外框,what?裸露在我面前我还得给他穿件衣服?对,就是这样。
那么还不懂?真是个小chu男,举个例子吧
首先是js,我们引入了插件,那么在js文件中写下
var myScroll ;
function firstloaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(firstloaded, 200); }, false);
解释一下上面的代码,第一行是阻止鼠标的默认行为,第二行是在200毫秒后执行上面的函数。那么上面的东西是什么呢,也就是说执行的这个函数会给叫做这个id的东西(wrapper)加滚动条。
在括号里面的就是外层包裹的div的id了。贴下代码
<div class="height scroller-wrap" id="wrapper">
<ul class="navs" >.
<li>榴莲</li>
<li>西瓜</li>
<li>椰子</li>
</ul>
</div>
外层包裹的div的id也就是函数声明里面的new iScroll('wrapper'),在这之后我们还得给div加一个overflow:hidden;给他设置一个高度height,那么滚动条就已经写好了,附上一个简陋的小demo。其实很简单,其实很自然。chrome调试切换成手机版就可以模拟移动端滚动了。代码贴的没位置了,这篇先到这里,下一篇再总结其他问题。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
ul{
background-color: #9E9E9E;
margin:0 auto;
width: 200px;
}
ul li{
list-style: none;
}
</style>
<body>
<div id="wrapper" style="height: 500px;overflow: hidden;">
<ul class="navs" >.
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
</ul>
</div>
</body>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function firstloaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(firstloaded, 200); }, false);
</script>
</html>