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有其他解決滾動內容顯示不完全的辦法進行評論告知,謝謝!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章