小程序,tab切换列表+滚动加载+onshow还是onload 的坑

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里的。比如支付页,比如订单详情。不管是熄灭屏幕还是跳转了其他页面,在再次看到这个页面的时候,倒计时得是最新的才对呀!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容