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 -- 监听窗口的大小变化
随机推荐
- [Google Guava] 1.3-常见Object方法
原文链接 译者: 沈义扬 equals 当一个对象中的字段可以为null时,实现Object.equals方法会很痛苦,因为不得不分别对它们进行null检查.使用Objects.equal帮助你执行n ...
- 项目:JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解 的 项目:JS实现简易计算器案例
- 数据结构---Set和Map
1.Set数据结构 Set本质上是一个没有重复数据,但是具有irerator接口可以遍历的一种集合. Set本身也是一种数据结构的构造函数. 1.Set的初始化 var obj = new Set(参 ...
- ueditor批量上传word图片
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- https 非对称加密
- C++问题--fread文件读不完整问题解决
今天突然遇到一个问题,用fwrite/fread读写文件,发现当fread读取文件时只能读一半, 即使用foef()查看是否读到文件结尾,也是显示文件已经读取到文件末尾,查看文件的返回值发现文件只读取 ...
- Java进阶知识22 Spring execution 切入点表达式
1.概述 切入点(execution ):可以对指定的方法进行拦截,从而给指定的类生成代理对象.(拦截谁,就是在谁那里切入指定的程序/方法) 格式: execution(modifiers-pat ...
- 通过zabbix来监控树莓派
安装zabbix-agent(4.0版本) 配置zabbix-agent(使用主动模式) 使用zabbix-sender(主动推送自定义数据) 以下 执行命令和相关配置文件: wget https:/ ...
- MySQL数据分析-(2)数据库的底层逻辑
(一) 数据库存在的逻辑 1.案例开篇-大部分公司对于数据和数字的管理都是低效率的 我们要学习数据库,就必须要搞清楚数据库是在什么样的情景下发明并流行的?学习新知识就要搞清楚每个知识点的来龙去脉,这样 ...
- CSP2019懵逼记
CSP2019 考场二日游 CJ 旅游团 本来我是准备咕掉的, 但是被强 ♂ 烈要求更博了 Day -INF ~ Day -1 专题巩固和联考 前面半个月疯狂爆炸 后面半个月状态恢复了, 考得还行 联 ...