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绑定)。
js监听屏幕的高度变化的更多相关文章
- js监听某个元素高度变化来改变父级iframe的高度
最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...
- js监听文本框内容变化
js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...
- js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- js监听input输入字符变化
<p class="text-input"> <input type="text" id="username" autoC ...
- js监听屏幕方向如何第一次默认不监听
this.supportOrientation = typeof window.orientation === 'number'; // 检查屏幕方向 checkScreenOrientation() ...
- js监听textarea 内容的变化,并计算内容的长度c
html代码如下: <div class="customer-message"> <label for="customerMessage&quo ...
- js监听url的hash变化和获取hash值
当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...
- js监听dom元素内容变化
$("#divid").bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.tar ...
- js -- 监听窗口的大小变化
随机推荐
- BZOJ 2095 [Poi2010]Bridges (二分+最大流判断混合图的欧拉回路)
题面 nnn个点,mmm条双向边(正向与反向权值不同),求经过最大边权最小的欧拉回路的权值 分析 见 commonc大佬博客 精髓就是通过最大流调整无向边的方向使得所有点的入度等于出度 CODE #i ...
- java-十五周作业
题目1:编写一个应用程序,输入用户名和密码,访问test数据库中t_login表(字段包括id.username.password),验证登录是否成功. 题目2:在上一题基础上,当登录成功后,将t_u ...
- 边学边体验django--模型
步骤: 1.选定数据库,然后修改 settings.py 中的 DATABASES配置 实验过了sqlite3. 应该是这个样子的: 2. 创建app, 建立数据表模型. python manage. ...
- CF741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths (dsu on tree) 题解
先说一下dsu算法. 例题:子树众数问题. 给出一棵树,每个点有点权,求每个子树中出现次数最多的数的出现次数. 树的节点数为n,\(n \leq 500000\) 这个数据范围,\(O(n \sqrt ...
- Math.cbrt() Math.sqrt() Math.pow()
Math.pow() 能实现 Math.cbrt() 和 Math.sqrt() 的功能,但并不完全相同. 1. Math.pow()和Math.cbrt()的区别 function isCube(m ...
- crm-权限管理
1 用户登录 设置session 将权限存放在session中 2 设置中间件,进行拦截 0 添加白名单,判断是否在白名单上 1 判断是否登录 2 权限过滤
- Luogu4191 [CTSC2010]性能优化【多项式,循环卷积】
题目描述:设$A,B$为$n-1$次多项式,求$A*B^C$在系数模$n+1$,长度为$n$的循环卷积. 数据范围:$n\leq 5*10^5,C\leq 10^9$,且$n$的质因子不超过7,$n+ ...
- 离线语音Snowboy热词唤醒+ 树莓派语音交互实现开关灯
离线语音Snowboy热词唤醒 语音识别现在有非常广泛的应用场景,如手机的语音助手,智能音响(小爱,叮咚,天猫精灵...)等. 语音识别一般包含三个阶段:热词唤醒,语音录入,识别和逻辑控制阶段. 热词 ...
- UVALive 5052 Genome Evolution ——(xjbg)
本以为这题n=3000,随便n方一下就能过.于是我先枚举长度len再枚举起点,不断增加新的点并删除原来的点,判断在b中的r-l+1是不是等于len即可,这个过程显然要用set维护比较方便,但是貌似卡了 ...
- jQuery源代码学习之十——动画Animate
一.Animate模块的代码结构 // 定义了一些变量 tweeners = {}; function createFxNow() {} function createTween() {} funct ...