之前用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. Vue项目创建build打包后可修改的配置文件

    需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置. 实现方法如下: 1.在项目的static目录下创建project.config.json文件(名称随意,建 ...

  2. MVC路由规则进一步了解

    本周由于工作需要,接触了PetaPoco(一个小型的ORM-框架)和ExtJS,这个项目框架是别人写好的,用的是MVC,我写的MVC程序一般控制器和视图都是在一个类库下面的,但是作者是把MVC中的控制 ...

  3. HDU 6143 - Killer Names | 2017 Multi-University Training Contest 8

    /* HDU 6143 - Killer Names [ DP ] | 2017 Multi-University Training Contest 8 题意: m个字母组成两个长为n的序列,两序列中 ...

  4. mouseover([[data],fn])

    mouseover([[data],fn]) 概述 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用.直线电机选型 注释:与 mous ...

  5. 参数类型 (@Test层)常用参数

    long lNum = 1234L; float fNum = 1.23f; double dNum = 1.23d;

  6. bzoj3508: 开灯

    题目链接 题解 设\(b[i]=a[i]\ xor\ a[i+1]\) 我们可以发现,修改只会改变\(b[l-1]\)和\(b[r]\) 然后发现\(b[i]=1\)的点最多\(2*k\)个 状压\( ...

  7. MySQL 跨版本主从复制时报错:ERROR 1794 (HY000): Slave is not configured or failed to initialize properly.

    背景: zabbix 数据库迁移,搭建主从,主是5.6.25,从是5.7.15,流式备份应用 redo.log 之后,change master 和reset slave 时报出如下错误 mysql& ...

  8. 7月清北学堂培训 Day 6

    今天是钟皓曦老师的讲授~ 合并石子拓展: 合并任意两堆石子,每次合并的代价是这两堆石子的重量的异或值,求合并成一堆的最小异或和. 状态设置:f [ s ] 把 s 所对应的石子合并的最小代价: 那么答 ...

  9. RAD,Eclipse切換界面語言(中日英)

    找到RAD的EXE的位置: 右鍵→屬性→Link先(Target) 將原來的"C:\Program Files\IBM\SDP\eclipse.exe" -product com. ...

  10. C之函数返回一个以上的值

    #include<stdio.h> #include<stdlib.h> //函数的返回值不能是数组 void add(int* a,int* b){ *a += 10; *b ...