初学者123
初学者123
  • 发布:2020-08-19 14:29
  • 更新:2020-08-20 12:08
  • 阅读:382

在subnvue页面,键盘弹出后,窗体高度被压缩,设置"softinputMode": "adjustPan",无效

分类:nvue

pages.json:


        {  
            "path" : "pages/home/home",  
            "style": {  
                "navigationBarTitleText": "首页",  
                "enablePullDownRefresh": true,  
                "app-plus": {  
                    "softinputMode": "adjustPan",  
                    "subNVues": [{  
                        "id": "popup_comment",  
                        "path": "subnvue/popup_comment",  
                        "type": "popup",  
                        "style": {  
                            "bottom":"0",  
                            "height":"65%",  
                            "width":"750upx",  
                            "background": "transparent"  
                        }  
                    }]  
                }  
            }  
        }, ```   
结果:在键盘弹出后,窗体高度被压缩,看不到评论区的顶部内容  
预期:在键盘弹出后,窗体高度自动上抬,能看到顶部内容
2020-08-19 14:29 负责人:无 分享
已邀请:
初学者123

初学者123 (作者) - 80后IT男

经过反复尝试,这个问题解决掉了。
核心思路,在键盘弹起的时候,动态改变弹出层(子窗体)的高度和到顶部的距离。
实现过程:
1.在input框,增加两个事件:@focus, @blur

  1. 动态设置事件触发时的弹出层高度:
    
                const popup_comment = uni.getSubNVueById('popup_comment')  
                popup_comment.setStyle({  
                    top: "10%",  
                })  
            },  
            blur(){  
                const popup_comment = uni.getSubNVueById('popup_comment')  
                popup_comment.setStyle({  
                    top: "50%",  
                    height: "50%"  
                })  
            }, ```   
    3.在pages.json中,对弹出层的设置是这样的:(这个应该是第一步)  
    ``` "path" : "pages/home/home",  
            "style": {  
                "navigationBarTitleText": "首页",  
                "enablePullDownRefresh": true,  
                "app-plus": {  
                    "subNVues": [{  
                        "id": "popup_comment",  
                        "path": "subnvue/popup_comment",  
                        "type": "popup",  
                        "style": {  
                            "bottom":"0",  
                            "height":"50%",  
                            "width":"750upx",  
                            "background": "transparent"  
                        }  
                    }]  
                } ```  
    其中:softinputMode不用设,没错,不用设,因为uniapp默认的softinputMode: "adjustPan"  

通过以上方法,基本可以完美实现需求。唯一需要注意的是,使用动态高度的时候,弹出层的初始高度不能设置太高,比如70%,会导致在键盘弹起后,弹出层的顶部超出屏幕高度,不能显示。

uniapp是一个很好用的框架,但是社区的服务真是跟不上,遇到问题,官方QQ服务群一般不回应,发帖也不回应,很无奈啊
我搜过社区的问题,发现遇到类似问题的人很多,希望我的解决过程,能对卡在这里的小伙伴有点帮助。
也希望大家能自发的多分享经验,也多帮助还在踩坑的其他小伙伴

要回复问题请先登录注册