底部footer 使用position:fixed固定在页面底部,通过变量的值来控制键盘弹起时是否自动上推页面,通过bindfocus来获取键盘高度,使input输入框聚焦时跟随键盘上移而不被遮挡,输入框失去焦点时触发bindblur事件,输入框恢复原位。
参考代码:
发布
foucus: function (e:any) {
var that = this;
that.setData({
bottom: e.detail.height
})
},
//失去聚焦
blur:function(e:any){
var that = this;
that.setData({
bottom: 0
})
},
.content {
height: 50vh;
}
.footer {
height: 90rpx;
width: 100%;
position: fixed;
bottom: 0;
}
.post-font-s {
float: right;
width: 60rpx;
height: 60rpx;
text-align: center;
margin-right: 50rpx;
}
.textarea-s {
width: 100%;
height: 50%;
}
输入框有个这个事件 bindkeyboardheightchange ,底部的footer如果是最底部 样式 bottom初始是0
根据这个事件去设置footer的bottom