1.单页面的滚动加载,
用onReachBottom 或者scrollview组件来实现,这个就不赘述了。
2.如果嵌套上tab切换。
那么就会出现两个问题:切换后,之前的数据和page页码保不保留? 如果不保留,点击的时候,需不需要立即清空之前的数据?
关于第一个问题
我看了github上很多例子,都是不保留的。也就是切换后,thedata重新赋值,直接替换了原来的数据。
如果想保留,那么几个tab,就要存储几套数据,每套都有独立的list数据和page页码
关于第二个问题,
是需要的,因为如果不立即清空,tab点击之后,页面如果刚好已经到底部,是无法再次触发onReachBottom或者onScrollToLower事件的
3.第一次加载数据的时候,写在onload还是onshow?
如果是不需要实时更新的列表,比如消息中心,分为系统消息和个人消息。这种的可以写在onload里。退出页面,再进入的时候,才会触发onload而再次更新。
如果是订单列表,比如“全部,待支付,待入住”。这种最好写在onshow里,因为待支付的订单有倒计时,倒计时结束,订单需要立即置为“已取消”状态。又例如从支付页,支付后返回到列表页,订单需要立即置为“待入住”状态。
这又引起了另外一个问题,onshow的时候,page页码需不需要重新置为1。
如果置为1,数据重新加载,之前浏览到第三页,还要再重新浏览一遍比较麻烦。
如果不置为1,page仍然是3,那么有可能第1页,第2页,刚好数据变动了而不知道!也有可能出现第三页数据重复,比如已经浏览到第三页了,跳转详情页又退回到列表页,执行onshow,又加载了第三页的数据,造成数据重复了!怎么都不完美,确实让人无语哈
4.针对想要保留之前的数据的做法,我也试了几次
最困扰的问题就是,无法触发onReachBottom或者onScrollToLower事件。
比如listA加载了第三页,listB加载了第二页。
点击tab时候,因为没有清空上一个tab页面的数据这个操作,那么来回切换几次,会出现切换后页面刚好已经到底部,还是无法触发onReachBottom或者onScrollToLower事件!!!
5.针对无法触发onReachBottom或者onScrollToLower事件,我试了一下,直接用touchstart和touchmove监听手势,来触发加载下一页。
虽然能实现监听手势,但是有个问题,虽然判断了方向,但是不能判断是否页面到底部。一般都是一页10条数据,手机端都需要两三屏了。每次刚滚动一点,就加载了下一页,肯定太费接口了。本来只是想看完第一页,结果触发了两次加载数据,把第2页和第3页都加载完了,这个就不太对了。
6.顺便提一句,之前tab切换的时候,因为没有清空data数据,是用scrollTop=0使页面回到顶部,等加载完再替换data。这个效果不好,不好在是肉眼可见的页面滚回顶部的效果。太丑了。
更骚的操作是,我没有意识到是需要清数据的问题,当时还想用overflow:hidden来隐藏滚动条,结果根本就不管用!!!
7.目前我的做法,就是订单页写在onshow,每次page页码重置为1。tab切换,要清空data数据,page置为1。其他页面写在onload。tab切换,仍然清空data,page置为1
8.还要提醒一下,有倒计时的页面,是一定要写在onshow里的。比如支付页,比如订单详情。不管是熄灭屏幕还是跳转了其他页面,在再次看到这个页面的时候,倒计时得是最新的才对呀!!