IScroll5实现下拉刷新上拉加载更

声明:虽然本文章为原创,但是很大部分参考了博客园博主MRxia的一篇iscroll的下拉刷新的实现方式,我个人把demo简化了一下,具体原来的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的响应式开发环境下运行

你可能感兴趣的:(插件使用)