1***@qq.com
1***@qq.com
  • 发布:2018-09-12 18:46
  • 更新:2021-01-22 17:42
  • 阅读:2953

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

分类: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 关注 分享
5***@qq.com

要回复文章请先登录注册

小菜啊

小菜啊

在manifest.json找到app-plus下添加"softinput" : {"mode" : "adjustPan"},注意只有在打包好的app上才有效果,可以解决软键盘顶页面布局的问题
2021-01-22 17:42
袁小水

袁小水

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

l***@163.com

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

5***@qq.com

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

1***@qq.com (作者)

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

5***@qq.com

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