首页 uniapp uniapp中webview的软键盘覆盖到input

uniapp中webview的软键盘覆盖到input

搞了好久 uniapp中webview的软键盘覆盖到input 打包成app的时候会出现这个问题, pc 不会 h5会出…

搞了好久

uniapp中webview的软键盘覆盖到input

打包成app的时候会出现这个问题, pc 不会

h5会出现

    onLoad() {
        var height=0;//定义动态的高度变量,如高度为定值,可以直接写
        uni.getSystemInfo({
            //成功获取的回调函数,返回值为系统信息
            success: (sysinfo) => {
                height = sysinfo.windowHeight;//自行修改,自己需要的高度 此处如底部有其他内容,可以直接---(-50)这种
            },
            complete: () => {
            }
        });
        var currentWebview = this.$scope.$getAppWebview();//获取当前web-view
        setTimeout(function() {
            var wv = currentWebview.children()[0];
            wv.setStyle({//设置web-view距离顶部的距离以及自己的高度,单位为px
                 top: 20,//此处是距离顶部的高度,应该是你页面的头部
                bottom:0,//防止输入框被软键盘遮挡
                height:height-20,//webview的高度
                scalable:true,//webview的页面是否可以缩放,双指放大缩小
                // titleNView:{//加上返回header
                // 	autoBackButton:true,
                // 	titleText:'在线客服',
                // }
            })
            // wx.setTitleNViewButtonStyle({
            // 	index:0,
            // 	styles:{
            // 		type:'back'
            // 	}
            // 	}
            // })
        }, 100);//如页面初始化调用需要写延迟

        uni.onWindowResize((res) => {
                if(res.size.windowHeight < height){
                    //高度缩小
                    setTimeout(function() {
                        var wv = currentWebview.children()[0];
                        wv.setStyle({//设置web-view距离顶部的距离以及自己的高度,单位为px
                             top: 20,//此处是距离顶部的高度,应该是你页面的头部
                            bottom:0,//防止输入框被软键盘遮挡
                            height:height-300,//webview的高度
                            scalable:true,//webview的页面是否可以缩放,双指放大缩小
                            // titleNView:{//加上返回header
                            // 	autoBackButton:true,
                            // 	titleText:'在线客服',
                            // }
                        })
                        // wx.setTitleNViewButtonStyle({
                        // 	index:0,
                        // 	styles:{
                        // 		type:'back'
                        // 	}
                        // })
                    }, 100);//如页面初始化调用需要写延迟

                }else{
                    //还原
                    setTimeout(function() {
                        var wv = currentWebview.children()[0];
                        wv.setStyle({//设置web-view距离顶部的距离以及自己的高度,单位为px
                             top: 20,//此处是距离顶部的高度,应该是你页面的头部
                            bottom:0,//防止输入框被软键盘遮挡
                            height:height-20,//webview的高度
                            scalable:true,//webview的页面是否可以缩放,双指放大缩小
                            // titleNView:{//加上返回header
                            // 	autoBackButton:true,
                            // 	titleText:'在线客服',
                            // }
                        })
                        // wx.setTitleNViewButtonStyle({
                        // 	index:0,
                        // 	styles:{
                        // 		type:'back'
                        // 	}
                        // })
                    }, 100);//如页面初始化调用需要写延迟
                }
            })
  },

<web-view :src=”url” v-show=”chatflag”></web-view>

 

 

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
没有了

已是最新文章

为您推荐

uniapp取消导航栏

uniapp取消导航栏

    uniapp取消导航栏 ,{ “path” : “pag...
返回顶部