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

https://ask.dcloud.net.cn/question/105142

复制代码
        {  
            "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 负责人:无分享

1 个回复

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

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

动态设置事件触发时的弹出层高度：

复制代码
            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服务群一般不回应，发帖也不回应，很无奈啊
我搜过社区的问题，发现遇到类似问题的人很多，希望我的解决过程，能对卡在这里的小伙伴有点帮助。
也希望大家能自发的多分享经验，也多帮助还在踩坑的其他小伙伴

发表评论取消回复