由于公司需求,要在手机在上做上拉,下拉加载的功能,在网上找了个插件,就是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是没有问题的