IScroll5实现下拉刷新上拉加载的功能实例
声明:虽然本文章为原创,但是很大部分参考了博客园博主MRxia的一篇iscroll的下拉刷新的实现方式,我个人把demo简化了一下。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网页空间、营销软件、网站建设、兴安网站维护、网站推广。
实现效果:类似网易新闻加载新闻列表(好吧,我的只能算是基础版,如要添加动图或者css样式或者canvas效果请自行脑补)
外部引入js文件,必须是iscroll-probe.js,这点是很重要的,因为基础版的 iscroll.js 插件并不支持实例化的IScroll对象的on事件绑定,当然还是要引入jQuery简化一下开发
以下是全局的css样式,当然你也可以直接复制过去,前面的是默认的iscroll的demo的样式,后面的pulldown-tips样式是作为绝对定位,当用户下拉不超过40px时显示“下拉刷新”的提示,下拉刷新后会被隐藏起来
html结构在默认demo的基础上在scoller里面添加刷新/加载数据提示
iScroll下拉刷新
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 5
- Pretty row 6
- Pretty row 7
- Pretty row 8
- Pretty row 9
- Pretty row 10
- Pretty row 11
- Pretty row 12
- Pretty row 13
- Pretty row 14
- Pretty row 15
- Pretty row 16
- Pretty row 17
- Pretty row 18
- Pretty row 19
- Pretty row 20
加载更多
js需要说明的是,这里的scroll事件当然不是原生dom的scroll事件,而是IScroll对象的滚动事件,类似touchmove事件,scrollEnd事件也类似touchend事件,在滚动结束后执行
如有出错,欢迎指正 PS:测试环境在firefox的响应式开发环境下运行
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
新闻名称:IScroll5实现下拉刷新上拉加载的功能实例
分享路径:http://pwwzsj.com/article/ipdcpj.html