uniapp h5小程序键盘弹起把输入框挡住问题

935 阅读1分钟

找了很久没有找到合适的解决方法,就自己做了一个

// height 监听页面变化后的高度 scroll-top自定滚动展示被遮住部分
<scroll-view :style="scroll ? { height: wh+'px' } : ''" :scroll-y="scroll" :scroll-top="scroll ? wh : 0">
    <input @focus="handlePasswordFocus"  @blur="handlePasswordBlur"/>
 </scroll-view>
 
handlePasswordFocus(e) {
    let isFirst = true;
    // 监听页面变化 如果键盘出现就滚动,消失就不滚动
    uni.onWindowResize(res => {
    
        console.log('变化后的窗口宽度=' + res.size.windowWidth)
        console.log('变化后的窗口高度=' + res.size.windowHeight)
        
        // 窗口高度小于表单的高度才滚动
        if (isFirst && 410 >= res.size.windowHeight) {
            this.scroll=true;;
            this.wh=res.size.windowHeight;
        }
        isFirst = false;
    });
},
handlePasswordBlur() {
    this.scroll=false;
}