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

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

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网页空间、营销软件、网站建设、兴安网站维护、网站推广。

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

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

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

 

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

 
 
下拉刷新
  • 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实现下拉刷新上拉加载的功能实例
URL地址:http://bzwzjz.com/article/ipdcpj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计 网站建设费用 网站建设推广 重庆外贸网站建设 企业网站制作 企业网站设计 移动手机网站制作 成都品牌网站建设 成都网站制作 成都网站制作 成都网站建设 网站设计公司 成都网站建设 外贸网站建设 成都企业网站建设公司 网站建设开发 成都网站建设 网站建设方案 成都品牌网站设计 手机网站制作设计 高端网站设计 成都定制网站建设