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