效果图:
demo下载链接
http://download.csdn.net/download/vlilyv/9947879
分析使用iscroll需要的结构(html):
id=”wrapper”包个class=”scroller”,
class=”scroller”包裹加载的数据及加载动作,
1,首先需要一个id=”wrapper”的div(块级元素都行,),包裹滚动内容,加载的数据及加载动作,该id用来创建iScroll实例。所有的一切都在这里运行。
2,然后需要一个class=”scroller”块级元素,用来滚动的,就是你拖动页面向上加载时,所拖动的就是scroller,包裹加载的数据及加载动作。
3,然后就是最里面的两个内容:加载的数据(布局随意),加载动作(布局随意)。
注意:这里加载的数据是从后台获取的,获取规则是按照以前的页码规则(以前pc端是一页展示多少,共多少页。),所以需要一个隐藏的input,只是用来存放页码数。便于取来运算。
代码部分:
html结构:
<div id="wrapper" class="integration_detail">
<section class="scroller register_new" id="scroller">
<div class="register_detail">
<ul class="register_list">
<li>签到赚积分<br><span class="register_time">2017.8.20</span>
<span class="register_right" >+10分</span>
</li>
</ul>
</div>
<div class="more"><i class="pull_icon"></i><span>上拉加载更多...</span></div>
<br>
</section>
<input type='hidden' value="1" class='page'>
</div>
js设置效果部分:
js请求后台数据并进行展示部分:
有问题可下载demo查看。还有问题请关注公众号(里面有我微信),公众号在博客名字里。