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

js监听屏幕的高度变化的更多相关文章

  1. js监听某个元素高度变化来改变父级iframe的高度

    最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...

  2. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  3. js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

  4. js监听input输入字符变化

    <p class="text-input"> <input type="text" id="username" autoC ...

  5. js监听屏幕方向如何第一次默认不监听

    this.supportOrientation = typeof window.orientation === 'number'; // 检查屏幕方向 checkScreenOrientation() ...

  6. js监听textarea 内容的变化,并计算内容的长度c

    html代码如下:   <div class="customer-message">   <label for="customerMessage&quo ...

  7. js监听url的hash变化和获取hash值

    当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...

  8. js监听dom元素内容变化

    $("#divid").bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.tar ...

  9. js -- 监听窗口的大小变化

随机推荐

  1. 002_FreeRTOS临界段代码

    (一)临界段代码也叫做临界区,是指那些必须完整运行,不能被打断的代码段 (二)FreeRTOS 与 临 界 段 代 码 保 护 有 关 的 函 数 有 4 个,两个是任务级的临界段代码保护,两个是中断 ...

  2. 002_linux之点灯(汇编深度解析)

    1.      开发板采用韦山东的开发板 2.      芯片CPU三星S3C2440A 3.  控制引脚:GPF4 4.  linux操作系统 5. 芯片手册下载地址:https://eyun.ba ...

  3. Flutter布局3-----Center

    Center 居中的布局 只能有一个chlid,但是可以用container包含好多子child,继承自Align. 用于将其子项与其自身对齐,并根据子级的大小自行调整大小. 如果它的尺寸受到约束且[ ...

  4. java中VO的使用(组成复杂的实体类)

    https://blog.csdn.net/G0_hw/article/details/78326359

  5. HTML学习日记 入门教程 知识点 ing

    初学html,如有错误,欢迎指正谢谢. 这只是一些基础的知识点,是学习后自己想到总结的,不适合资深者. 1.href是Hypertext Reference的缩写.意思是指定超链接目标的URL.是cs ...

  6. pom.xml报错 : Missing artifact org.apache.shiro:shiro-spring:bundle:1.2.5

    添加有<type>bundle</type>标签的依赖时,都会报这个错. 需要在<build/><plugins/>里面追加标签 <plugin& ...

  7. Jmeter linux 运行

    一.在Linux服务器先安装sdk 1.先从客户端下载jdk1.8.0_144.tar.gz,再上传到服务器 2.解压:tar -xzf jdk1.8.0_144.tar.gz,生成文件夹 jdk1. ...

  8. Open Live Writer 显示不出来代码着色插件解决办法

    下载地址: Open Live Writer 插件更新 下载后要把下面这5个文件,全部解除锁定(右键属性打开) Memento.OLW.Plugins.dll OLWPlugins.css OpenL ...

  9. 多项式fft、ntt、fwt 总结

    做了四五天的专题,但是并没有刷下多少题.可能一开始就对多项式这块十分困扰,很多细节理解不深. 最简单的形式就是直接两个多项式相乘,也就是多项式卷积,式子是$N^2$的.多项式算法的过程就是把卷积做一种 ...

  10. varnish web cache服务

    varnish介绍 缓存开源解决方案: - varnish - 充分利用epoll机制(能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率),并发量大,单连接资源较轻 - squid ...