这是html5下拉刷新和上拉加(jiā)载(zǎi)更(gèng)多下(xià)载,现(xiàn)在已经不是(shì)纯androids独霸天下的时代(dài)了,H5嵌(qiàn)入androids的(de)Hybrid混合开发是(shì)大势(shì)所趋。今天(tiān)给大家带来的就是移动端中常见的“上拉刷新,下拉加(jiā)载”特效,这(zhè)个特效将会基(jī)于H5来实现。
html5下拉刷(shuā)新和上(shàng)拉(lā)加载更多是前(qián)一段有个(gè)手机端的项目需(xū)要用到下拉刷新和上拉加载更多的效果,脑海里(lǐ)第一反映就是微博那种效果(guǒ),刚开始的理(lǐ)解有些偏差,以(yǐ)为下拉也是追加(jiā)数(shù)据,上拉也是追(zhuī)加数据,后请教同事后发现(xiàn)其实下拉只是(shì)刷新最新(xīn)数据而已,上拉是(shì)追(zhuī)加(jiā)数据。
1、引用iScroll.js, 在初始化时添(tiān)加两(liǎng)个事件监听:touchMove、DOMContentLoaded。
2、实现iScroll插件的onScrollEnd事件, 也就是在这个事件(jiàn)里(lǐ)调用你自己的ajax方法实现数据的刷新和追加。
3、上(shàng)拉加载更多请求后台时就相当于分页请求数据(jù),这时候需要在(zài)ajax请求时发送pageIndex参数,而初始化加载时需(xū)要从后台返(fǎn)回一个(gè)pageCount以(yǐ)便前台判断。
4、最关键的就(jiù)是实现下拉刷(shuā)新方(fāng)法(pullDownAction)和上拉加载更(gèng)多(pullUpAction)方法。
html5 实现下(xià)拉刷新和下拉(lā)加载(zǎi)更(gèng)多实现分页功能。
