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