iscoll.js（4.2.5）使用

由于公司需求，要在手机在上做上拉，下拉加载的功能，在网上找了个插件，就是iscoll这个很好用，用的过程中，也遇到很多坑，在这里记录下

这个是在网上下的，很不过，不过有两个坑要注意

1.dom结构

一定要有header，footer，iscoll.js是根据这两个div来算出wrapper的高度的，一定要有，就算没有相应的内容，把高定为0也要放上去，不然出现滚动条touchmove效果会有问题的

<div id="header">
<a href="../db.html#page2">iScroll实例：下拉刷新，滚动翻页</a>
</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<ul id="thelist">
<li>Pretty row 1</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
</div>

</div>
</div>

<div id="footer"></div>

 

2.数据，网上是通过touchmove时自动 生成的，但是真实是数据不可能无限，当数据加载完时，应该怎么处理，我自己也写了个例子，一起放上来

链接:

http://pan.baidu.com/s/1c1NsKfQ

密码:

yvii

 

第一个文件夹放的是从网上下来的，除了上面我说的要注意的两个点外，没有其他问题

 

下面说下我写的文件夹iscoll

目录是这样的

 

 css文件夹

第一个css是初始化标签样式，样式都写在zs_style里，都可以根据你的需求改

这三个的样式要注意写好, wrapper的top和bottom都要设置

 

js文件夹

data.json是我模似的一段数据

rem.js是因为这个例子中我要做适应处理，要是不想用这个，把样式里的rem单位换成px或%可以了

zepto.min.js是因为公司要求移动端必需要用这个，其实和jquery差不多，api有95%都是一样的，只有个别有点小差别，其他都一样

zs_style.js里 js写在里面

主要来看下这个js

 

 页面默认就要有三条

 

额，刚发现个问题

我把json文件放在本地果断不行

 

要放在服务器才能请求到

之前我把我本地文件夹和服务器地址关联起来了，所以可以顺利请求到数据

 

额，就是这样吧，js是没有问题的