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

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

作者: 每天进步一点点5454 | 来源:发表于2022-08-18 14:42 被阅读0次

    解决思路:给当前输入框加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'
            })
        },
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/yquegrtx.html