1191658459@qq.com
1191658459@qq.com
  • 发布:2018-09-12 18:46
  • 更新:2019-05-06 16:07
  • 阅读:816

解决底部选项卡被软键盘上顶问题

分类:Native.js

暂时解决思路:(缺点:在软键盘上来的时候选项卡会闪一下再消失)

获取选项卡的view(包括悬浮球:悬浮球是新绘制的view),运用setStyle()修改view样式;

监听窗口大小变化resize事件,对应改变样式width宽度。(经测试修改的样式只能是在mainfest.json的subsubNViews=>styles下的样式,新增样式好像没反应,height高度好像会影响整个的布局,所有修改了width的样式)

下面是部分代码:

var tabBottom = 0,nview = plus.nativeObj.View.getViewById('tabBar');  

// 监听window的resize,避免软键盘顶上底部选项卡

window.addEventListener('resize', function() {   
      if(tabBottom == 0){   
          nview.setStyle({    
             width: "0px"    
          });  
         drawNativeIcon.setStyle({    
             width: "0px"    
         });  
         tabBottom = 1;  
     }else{  
         nview.setStyle({    
               width: '100%'     
          });  
         drawNativeIcon.setStyle({    
         width: "60px"    
         });  
        tabBottom = 0;  
    }  
   console.log('at index.html:624 webView styles'+JSON.stringify(self.getStyle().subNViews[0].styles));  
});  

闪一下再消失,还是感觉不太好,​请问各路大神还有什么更好的方法吗?

2018.9.14

优化了上述的问题解决方法:

解决底部选项卡被软键盘上顶问题:
获取屏幕高度固定在底部,不上顶
解决软键盘弹出后,有一段区域穿透父页面问题:
监听窗口大小变化时改变子页面原来bottom:51px,再次变化时修改回来

                            /// 避免软键盘顶上底部选项卡  
                nview.setStyle({  
                    top: (height - 50) + 'px',  
                });  
                drawNativeIcon.setStyle({  
                    top: (height - 60) + 'px',  
                });               
                window.addEventListener('resize', function() {  
                    if(activePage == plus.webview.getLaunchWebview()) {  
                        return;  
                    }  
                    if(tabBottom == 0) {  
                        activePage.setStyle({  
                            bottom:'0px'  
                        });  
                        tabBottom = 1;    
                    } else {  
                        activePage.setStyle({  
                            bottom:'51px'  
                        });  
                        tabBottom = 0;    
                    }  
                    app.log('self style',activePage.getStyle());                              
                });  
1 关注 分享
569729444@qq.com

要回复文章请先登录注册

648640819@qq.com

648640819@qq.com

height是哪来的?
2019-05-06 16:07
liu_yuchong@163.com

liu_yuchong@163.com

drawNativeIcon和activePage是啥?
2019-03-12 17:55
569729444@qq.com

569729444@qq.com

感谢UP分享,很有用,很棒!
2018-09-14 15:28
1191658459@qq.com

1191658459@qq.com (作者)

回复 569729444@qq.com:
B站逛多了吧,小兄弟
2018-09-12 18:59
569729444@qq.com

569729444@qq.com

同样出现这种问题,解决了@我,感谢UP主
2018-09-12 18:50