ionic项目开发时,我们往往需要实现这么一个,上面标题等部分固定不动,下面的展示信息部分内容较多时实现滚动。
在ion-content内的部分默认是滚动的,但是我们不需要它全部内容滚动,应该怎么办呢?
1、先给ion-content加上属性scroll="false",如下图:
<ion-content scroll="false">
...
</ion-content>
2、给需要滚动的部分外部加上<ion-scroll></ion-scroll>,如下:
<ion-content scroll="false">
...
<ion-scroll>
...
</ion-scroll>
</ion-content>
这样就完成了ionic的部分滚动,但是却会发现,ion-scroll部分的内容并没有显示完全,这时给ion-scroll添上style="height:100%",
会发现拉到底不拉不动的时候还是有好几条数据没有显示,看到网上有说在ion-scroll内部最后面加上:
<ion-scroll>
...
<ion-infinite-scroll on-infinite="loadMore()"></ion-infinite-scroll>
</ion-scroll>
然后再给loadMore()设置一下什么的,结果是:我的数据又多显示了几条,但是依然没有显示完全,该怎么办?
最后,我还是用了之前在其它地方用到的方法,在最后加一个<br>标签,就像这样:
<ion-scroll>
...
<br style="line-height:xxx" />
</ion-scroll>
这个xxx代表的数值就需要各位自己根据实际情况去尝试了,不断增加,直到能显示完全为止,不过这样会不会有新的问题,当我数据量进一步增加时,还能显示完全吗?经本人试验,依然可以显示完全,我用了两台手机以及模拟器上都可以完全显示,即使再添加数据也没问题。
不过,以上本人仅在Android上试验成功(没有试验ios的条件),有兴趣的可以在ios平台试验一下,看看是否能达到一样的效果。欢迎有试验过ios的,或者是ios有其他解决滚动内容显示不完全的办法进行评论告知,谢谢!