解决小程序上点击输入框键盘弹起后弹框显示不全问题

2022-08-18  本文已影响0人  每天进步一点点5454

解决思路:给当前输入框加margin-bottom即可

1.弹窗定义获取焦点、失去焦点
2.当获取焦点时,获取当前弹窗的高度*2 给当前弹窗增加动态样式
3.失去焦点时给样式设置为0即可

data:{
marginBottom :0
}
       <view  style="{{ marginBottom }}">
             <input placeholder="请填写邮箱" id="tip_email"  bindfocus="focusvalemail" bindblur="blurvalemail" 
            value="{{inputvalue}}" />
      </view>


     focusvalemail(e){
        const _this=this;
        _this.setData({
            marginBottom:'margin-bottom:'+e.detail.height+'rpx'
        })
     },

    blurvalemail(){
        const _this=this;
        _this.setData({
            marginBottom:'margin-bottom:0'
        })
    },
上一篇下一篇

猜你喜欢

热点阅读