【技巧】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

这样就可以了！