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

解决思路:给当前输入框加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'
        })
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容