输入法遮挡浮动层笔记1
1.预期效果点击输入获取焦点时触发,浮动层在输入法之上
2.当失去焦点时隐藏输入法浮动层在底部
3.css 代码
.layer{
border-top: solid 1px#e5e5e5;
position: fixed;
bottom: ;
left: ;
z-index: 999;
background: #fff;
width: 100%;
}
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