码迷,mamicode.com
首页 > 其他好文 > 详细

ionic3 监听软键盘的高度

时间:2019-03-30 18:37:47      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:code   dshow   tail   bottom   obs   高度   div   问题   blog   

ionic1 和普通cordova的大家都知道 就是看ionic3 和4

 

https://blog.csdn.net/sean_css/article/details/70243893

 

 

ionic cordova plugin add ionic-plugin-keyboard

$ npm install --save @ionic-native/keyboard

经过本人测试 这个方法 ionic1 ionic3 都可以用 

ionic3 把方法写到 构造器 或者 生命周期事件里面就行 

 

 

 

ionic1里面的用法 addEventListener 这种这种写法在ionic3 的ts 中无法与外部变量通信 应该是机制问题

 

//监听软键盘弹出
 
          window.addEventListener(‘native.keyboardshow‘, function (e:any) {
 
 
 
          //e.keyboardHeight 表示软件盘显示的时候的高度
 
          //alert(JSON.stringify(e))
 
          this.keyboardshowHeightBottom=e.keyboardHeight+‘px‘;
 
        });
 
        //监听软键盘关闭
 
        window.addEventListener(‘native.keyboardhide‘, function (e) {
 
 
 
          //e.keyboardHeight 表示软件盘显示的时候的高度
 
          //alert(JSON.stringify(e))
 
          this.keyboardshowHeightBottom=‘0px‘;
 
        });

ionic3 里面的用法 

 

//rxjs
 
import { Observable } from ‘rxjs/Observable‘;
 
import ‘rxjs/add/observable/fromEvent‘;
 
 
 
 
 
Observable.fromEvent(window, "native.keyboardshow")
 
          .debounceTime(100)
 
          .subscribe((event: any) => {
 
              alert(‘显示:‘+JSON.stringify(event))
 
 
 
              //this.keyboardshowHeightBottom=event.keyboardHeight+‘px‘;
 
          });
 
          Observable.fromEvent(window, "native.keyboardhide")
 
          .debounceTime(100)
 
          .subscribe((event: any) => {
 
              //alert(‘关闭‘+JSON.stringify(event))
 
 
 
 
 
          });
 

 

ionic3 监听软键盘的高度

标签:code   dshow   tail   bottom   obs   高度   div   问题   blog   

原文地址:https://www.cnblogs.com/tianmiaogongzuoshi/p/10628382.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!