iscroll5的demo,pull to refresh ,pull to load(下拉刷新,上拉加载)

本文记录了作者在Hybrid App开发中使用iscroll5进行下拉刷新和上拉加载功能实现的过程及遇到的问题。尽管iscroll5开源,但在实际应用中出现诸多bug,导致开发成本增加。文中列举了多个学习资源和遇到的bug,包括tap事件触发两次、click事件兼容性问题等,并建议仅需要基础下拉刷新和上拉加载功能的开发者参考特定示例。
摘要由CSDN通过智能技术生成


首先不得不吐槽一下Hybird app开发的确实名不虚传的有各种坑。
本来是想稍微接触Hybird app的开发,然后更深入的去研究。但真正实施到项目,出现了不少bug。

当然这些bug跟这个iscroll5的组件有不少关系,迫于时间关系,弃用了这个东西,写下此文,待日后反思或留给自己、搜到此处的人再用,先记录以下感性体会:

1、Hybird app 并不是想象这么好的解决方案,它成本并不低,需要开发人员具有良好的web 前端 和android开发知识。

2、跟iscroll5有关,虽然这东西开源,但是用他人的东西,总归有学习过程,本来用别人的东西就是为了节省时间,但是用了之后出现一堆bug,适得其反。


起初使用这个iscroll5,是项目中需要一个pull  to refresh ,pull  to load(下拉刷新,上拉加载)的功能。

一开始google,查找国内外的网站,试用了几个demo,isroll4的不少,但iscroll5的不是很多,特别国内的网站。

下面贴出自己找的一些相关的网站:

1、知识、源码类

http://cubiq.org/iscroll-5 (官网)

http://blog.csdn.net/gcz564539969/article/details/9156141 (isroll4 升级到iscroll5使用的问题)

http://blog.csdn.net/ihetqxl/article/details/36538665(iscroll5 部分api)

http://www.ghugo.com/iscroll-5-source/ (iscroll5源码注解)

http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html  (使用方法)

https://github.com/iiunknown/iscroll5.doc.cn  中文api

http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html  (pull to refresh, pull to load 完整demo)


2、bug

https://github.com/cubiq/iscroll/issues/270   tap fire tiwce (tap调用两次)

http://www.52html5.com/?p=2618  click事件兼容问题


个人项目备注

assets 目录



html页面引入:


	<script type="text/javascript" src="../jq/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../iscroll/i5/build/iscroll-probe.js"></script>


项目使用iscroll遇到问题的解决:

tap 调两次

不明确bug的原因,后来是用click事件代替的。(li为单行)

	li.removeEventListener('click', clickLi);
	li.addEventListener('click', clickLi, false);


如果只是需要一个pull to refresh 和pull to load的例子,去这个网站看:

http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html


个人demo源码:

http://download.csdn.net/detail/tiw163/8414059







  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值