H5应用 安卓输入法弹出撑开底部导航栏的问题解决

浏览了很多博客,解决提示是设置安卓底层代码,而我们开发H5与平台无关,无从设置。于是用了一个猥琐的办法,去控制底部导航的显示不显示。
代码如下:

  <ion-footer-bar ng-show="footFlg">
    <a class="tab-item" ng-show="hasPrivilege" href="#/undeal">
      <image src="../www/img/undeal-unchoose.svg" class="img_size"></image>
      <p>待我处理</p>
    </a>
    <a class="tab-item" href="#/submit">
      <image src="../www/img/我要反馈-选中.svg" class="img_size"></image>
      <p>我要反馈</p>
    </a>
    <a class="tab-item" href="#/feedback">
      <image src="../www/img/mine-unchoose.svg" class="img_size"></image>
      <p>我的反馈</p>
    </a>
  </ion-footer-bar>

标志位 footFlg 去控制底部导航栏的展示与否。默认显示,在文本输入框 focus时候不显示,blur时候再次显示。

<textarea id="comment" type="text" class="feedback_content" ng-model="params.content" placeholder="您想问点什么。。。"  maxlength="1000" ng-focus="hideBar()" ng-blur="showBar()"></textarea>

此时刚开始的问题就解决了,但同时引入了一个新问题。点击关闭输入法的关闭按钮,你会发现底部导航栏并没有展示。最初的想法就是通过获取输入法的关闭按钮去进行事件添加,想想就觉得麻烦。现在,输入法关闭和打开会改变的就是当前窗口的高度,利用 window.resize()去做处理。

 var oHeight = $(document).height();     //获取当前窗口的高度
  $(window).resize(function () {
    if ($(`docu`ment).height() >= oHeight) {
      $scope.footFlg = true;
    } else {
      $scope.footFlg = false;
    }
  })

现在就大功告成了,希望我的分享可以帮助你。
如果 ng-show切换过程中,出现页面闪烁,请在页面文件中添加


你可能感兴趣的:(H5,ionic,移动-web,H5-安卓-输入法)