js監聽屏幕的高度變化


之前用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綁定)。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM