項(xiàng)目中零如,在使用<ion-content>滾動(dòng)到底部的時(shí)候,一直使用其官方的scrollToBottom()锄弱,但是在實(shí)際運(yùn)行的時(shí)候考蕾,總是無法顯示出效果,這里就很奇怪了会宪,官方也未做任何對于它的解釋肖卧,為啥在同步情況下無法達(dá)到最終的效果?最終博主檢查代碼掸鹅,發(fā)現(xiàn)了其中的坑塞帐。
在努力尋找并翻閱源代碼的時(shí)候發(fā)現(xiàn):
也就是說在content源代碼中巍沙,有個(gè)ScrollView葵姥,也就是說對content滾動(dòng)操作都是對這個(gè)scrollview進(jìn)行滾動(dòng)操作。于是我們翻閱了scrollview的源代碼句携。
ScrollView源代碼:
不難理解在對content調(diào)用任何的關(guān)于滾動(dòng)的方法都會(huì)觸及到ScrollView榔幸,也就是說每次滾動(dòng)調(diào)用ScrollView的方法,再看看ScrollView本身調(diào)用的方法的注釋"DOM WRITE" 為耗時(shí)操作务甥,所以需要handler之類的異步處理方式牡辽。而既然進(jìn)行dom操作,那么我們再進(jìn)入dom的ts源碼進(jìn)行查閱與分析:
即包含有handler的有這么幾個(gè)方法敞临,這些方法都是處理耗時(shí)操作的态辛。這里博主推薦用setTimeout進(jìn)行處理handler,因?yàn)榭梢宰约嚎刂拼撕臅r(shí)操作的時(shí)間挺尿,可以在網(wǎng)絡(luò)請求數(shù)據(jù)并填充數(shù)據(jù)【這里angular通過數(shù)據(jù)綁定奏黑,進(jìn)行domwrite操作,同樣耗時(shí)编矾,所以需要異步延遲處理】后熟史,用來處理這樣的耗時(shí)操作,于是有了以下代碼:
@ViewChild(Content) content :Content
setTimeout (()=>{
content._scroll.scrollToBottom()
} ,1000)
將此方法甚至能夠封裝成一個(gè)utils:
export class Utils{
public static toMoveBottom(content:Content){
setTimeout(()=>{content._scoll.scrollToBottom()},1000)
}
}
最后看看處理后的效果: