ionic实现部分内容滚动,以及滚动内容显示不完全的解决办法

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有其他解决滚动内容显示不完全的办法进行评论告知,谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值