之前用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. [Google Guava] 11-事件总线

    原文链接 译文连接 译者:沈义扬 传统上,Java的进程内事件分发都是通过发布者和订阅者之间的显式注册实现的.设计EventBus就是为了取代这种显示注册方式,使组件间有了更好的解耦.EventBus ...

  2. C语言学习系列(五)变量和常量

    一.常量 定义:在程序运行中,其值不能改变的量称为常量 分类:常量可以是任何的基本数据类型,比如整数常量.浮点常量.字符常量,或字符串字面值,也有枚举常量. 在 C 中,有两种简单的定义常量的方式: ...

  3. currentTimeMillis与 nanoTime

    时间单位换算 1s=10^3ms(毫秒)=10^6μs(微秒)=10^9ns(纳秒)=10^12ps(皮秒)=10^15fs(飞秒)=10^18as(阿秒)=10^21zm(仄秒)=10^24ym(幺 ...

  4. 指针&虚函数多态性

    class Class1 { public: virtual void f() { cout << "Function f() in Class1 \n"; } voi ...

  5. 二进制文件方式安装kubernetes集群

    所有操作全部用root使用者进行,高可用一般建议大于等于3台的奇数,我们使用3台master来做高可用 练习环境说明: 参考GitHub master: kube-apiserver,kube-con ...

  6. MySQL 5.7 OOM问题诊断——就是这么简单

    转载自:http://www.sohu.com/a/114903225_487483 Inside君最近把金庸先生的笑傲江湖重看了三遍,感慨良多.很多工作.管理.生活.学习上的问题都能在其中一窥究竟, ...

  7. Shell 05 Sed

    一.基本用方法 1.sed文本处理工具的用法 用法1:前置命令 | sed  [选项]  '条件指令' 用法2:sed  [选项]  '条件指令'  文件.. .. 注意:没有条件时候,默认所有条件, ...

  8. slf4j、jcl、jul、log4j1、log4j2、logback大总结[转]

    #1 系列目录 jdk-logging.log4j.logback日志介绍及原理 commons-logging与jdk-logging.log4j1.log4j2.logback的集成原理 slf4 ...

  9. 报错 One or more constraints have not been satisfied.

    常出现在导入已有标签时. 需要在<build/><plugins/>里面追加标签 <plugin> <groupId>org.apache.maven. ...

  10. Java 方法的重写

    方法重写规则: 1.子类要重写的方法与父类方法具有完全相同的返回类型+方法名称+参数列表: 2.子类要重写的方法的访问权限大于或者等于父类方法的访问权限: 3.子类要重写的方法不能抛出比父类方法更大的 ...