IScroll5实现下拉刷新上拉加载的功能实例

IScroll5实现下拉刷新上拉加载的功能实例

声明：虽然本文章为原创，但是很大部分参考了博客园博主MRxia的一篇iscroll的下拉刷新的实现方式，我个人把demo简化了一下。

实现效果：类似网易新闻加载新闻列表（好吧，我的只能算是基础版，如要添加动图或者css样式或者canvas效果请自行脑补）

外部引入js文件，必须是iscroll-probe.js，这点是很重要的，因为基础版的 iscroll.js 插件并不支持实例化的IScroll对象的on事件绑定，当然还是要引入jquery简化一下开发

以下是全局的css样式，当然你也可以直接复制过去，前面的是默认的iscroll的demo的样式，后面的pulldown-tips样式是作为绝对定位，当用户下拉不超过40px时显示“下拉刷新”的提示，下拉刷新后会被隐藏起来

html结构在默认demo的基础上在scoller里面添加刷新/加载数据提示

js需要说明的是，这里的scroll事件当然不是原生dom的scroll事件，而是IScroll对象的滚动事件，类似touchmoveSPzqJ事件，scrollEnd事件也类似touchend事件，在滚动结束后执行

如有出错，欢迎指正  PS：测试环境在firefox的响应式开发环境下运行

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。