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