评论

输入法遮挡浮动层笔记1

输入法键盘遮挡浮动层,个人笔记

1.预期效果点击输入获取焦点时触发,浮动层在输入法之上



2.当失去焦点时隐藏输入法浮动层在底部



3.css 代码

.layer{
  border-top: solid 1px#e5e5e5;
  position: fixed;
  bottom: ;
  left: ;
  z-index999;
  background#fff;
  width100%;
}


4.js实现方式,输入框获取焦点时,获取高度,然后值值给fixed 浮动层 底部距离



data{

lofocus// 默认为0

},
// 获取焦点时触发
  focusfunction{
    console.log(e);
    this.setData({
      lofocus: e.detail.height
    })
  },
// 失去焦点时触发
  blurfunction(){  
    this.setData({
      lofocus: 
    })
  },


<!--页面view 代码  padding-bottom 为兼容 苹果x 等机型 -->viewclass"layer" 
style"padding-bottom:{{lofocus>0?'0':'constant(safe-area-inset-bottom)'}};
padding-bottom:{{lofocus>0?'0':'env(safe-area-inset-bottom)'}} ;bottom:{{lofocus}}px;"
我是浮动层 
</view



最后一次编辑于  2020-01-07  
点赞 0
收藏
评论
登录 后发表内容