之前用VUE寫完一個聊天界面,對於ios的效果該優化的地方都已經優化,且已上線。現在因項目需要,在另外一個angularjs+ionic的框架也要寫一個聊天頁面,目前還在開發中,發現忘記了一些很關鍵的東西,所以先備個份:
1.當屏幕發生高度變化(其實是當軟鍵盤打開的時候,窗口的高度發生了變化)
window.onresize = () =>{
//只要窗口高度發生變化,就會進入這里面,在這里就可以寫,回到聊天最底部的邏輯
}
2.vue的寫法,把上面的方法寫在了mounted里面,然后return 窗口可視范圍的高度並存在變量里面,然后watch里面去監聽這個變量,變量變化>>>回到底部:滾動容器.scrollTop = 滾動容器.scrollHeight;
3.對於angularjs+ionic是以下方法(打開軟鍵盤,窗口變化,滾動到底部):
window.onresize = function(){
$scope.$apply(function(){
$ionicScrollDelegate.resize();
$ionicScrollDelegate.scrollBottom();
})
}
4.對於很多疑問關於軟鍵盤發送信息之后,軟鍵盤關閉。需求想要的效果是發送信息之后,軟鍵盤不會自動收起來。我的做法是用label,在發送按鈕用label標簽。如下(vue):
<input id="modalText" type="text" v-model="chartMsg">
<label for="modalText" @click="sendMsg">發送</label>
以上,angularjs也是類似這樣的寫法(運用label標簽for和input綁定)。