【apicloud】实现APP底部导航适应软键盘高度

翻滚的胖子
2020-03-23 17:24:16
APP开发
JavaScript APICloud

apicloud开发APP时遇到需求，在页面底部加入一个输入导航，需要能适应软键盘，在软键盘弹出时自动浮于软键盘上方。

apicloud提供的解决方案：

安卓：

于config.xml中加入

1	`<preference name="softInputMode"` `value="resize"/>`

IOS：

于openWin、openFrame时加入参数 softInputMode: 'resize'

api.openWin({
    name:'main',
    url:'main.html',
    softInputMode: 'resize'
})

不过在添加后发现依然存在无法适应高度的问题。

解决方案：

页面通过win+frm的结构实现，底部导航做于win中，frm则用于渲染具体页面内容。

在win中加入如下监听方式，通过监听输入框的点击与焦点事件触发对应的openWin高度重新计算事件，来调整页面的高度实现底部导航弹动。

    //********************实现软键盘呼出后自定改变页面大小**********************
    var timer, windowInnerHeight;
    var header = $api.byId('aui-header');
    var footer = $api.byId('aui-footer');
    var headerPos = $api.offset(header);
    var footerPos = $api.offset(footer);
    function eventCheck(e) {
        if (e) { //blur,focus事件触发的
            changeFrm();
            if (e.type == 'click') {//如果是点击事件启动计时器监控是否点击了键盘上的隐藏键盘按钮，没有点击这个按钮的事件可用，keydown中也获取不到keyCode值
                setTimeout(function () {//由于键盘弹出是有动画效果的，要获取完全弹出的窗口高度，使用了计时器
                    windowInnerHeight = window.innerHeight;//获取弹出android软键盘后的窗口高度
                    timer = setInterval(function () { eventCheck() }, 100);
                }, 500);
            }
            else clearInterval(timer);
        }
        else { //计时器执行的，需要判断窗口可视高度，如果改变说明android键盘隐藏了
            if (window.innerHeight > windowInnerHeight) {
                clearInterval(timer);
                changeFrm();
            }
        }
    }
    $('你对应的输入框的class或者id').click(eventCheck).blur(eventCheck);
 
    function changeFrm(){
        setTimeout(function () {
            api.setFrameAttr({
                name: '你的frame名称',
                rect: {
                    x: 0,
                    y: headerPos.h,
                    w: 'auto',
                    h: window.innerHeight - headerPos.h - footerPos.h
                },
                softInputMode: 'resize',
                bounces: true
            });
        }, 400);
    }
    //********************实现软键盘呼出后自定改变页面大小**********************