項目中,在使用<ion-content>滾動到底部的時候,一直使用其官方的scrollToBottom(),但是在實際運行的時候,總是無法顯示出效果,這里就很奇怪了,官方也未做任何對于它的解釋,為啥在同步情況下無法達到最終的效果?最終博主檢查代碼,發現了其中的坑。
直接使用,未處理.gif
在努力尋找并翻閱源代碼的時候發現:
centent源代碼.jpg
也就是說在content源代碼中,有個ScrollView,也就是說對content滾動操作都是對這個scrollview進行滾動操作。于是我們翻閱了scrollview的源代碼。
ScrollView源代碼:
ScrollView源代碼1.jpg
ScrollView源代碼2.jpg
不難理解在對content調用任何的關于滾動的方法都會觸及到ScrollView,也就是說每次滾動調用ScrollView的方法,再看看ScrollView本身調用的方法的注釋"DOM WRITE" 為耗時操作,所以需要handler之類的異步處理方式。而既然進行dom操作,那么我們再進入dom的ts源碼進行查閱與分析:
dom源碼部分.png
即包含有handler的有這么幾個方法,這些方法都是處理耗時操作的。這里博主推薦用setTimeout進行處理handler,因為可以自己控制此耗時操作的時間,可以在網絡請求數據并填充數據【這里angular通過數據綁定,進行domwrite操作,同樣耗時,所以需要異步延遲處理】后,用來處理這樣的耗時操作,于是有了以下代碼:
@ViewChild(Content) content :Content
setTimeout (()=>{
content._scroll.scrollToBottom()
} ,1000)
將此方法甚至能夠封裝成一個utils:
export class Utils{
public static toMoveBottom(content:Content){
setTimeout(()=>{content._scoll.scrollToBottom()},1000)
}
}
最后看看處理后的效果:
處理后的效果.gif