【技巧】ionic局部上拉加载模块

image.png

产品需求:左右两个框都可以上下滑动+上拉加载

关键组件:https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

一看就知道 overflow:auto;height:100%

开始我是这样自我感觉良好的。。。。。。

但是一加上InfiniteScroll,就发现有bug了(你可以直接用上面链接的demo,在demo外面加一个层设置overflow:auto;height:100%就能看到效果了)

image.png
image.png

基于我太懒...而不想重写他的情况下...我无意中找了到解决办法...
其实InfiniteScroll的实现是基于ion-content,加了overflow后底部距离和ion-content就不发生变化了。

解决办法很简单:再给atk组件加多一个ion-content就可以了

html


image.png
image.png
image.png

这样就可以了!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容