小程序中，fixed在底部的view，在弹出输入法键盘后如何保持可见？
发布于 6 年前 作者 hhao 8245 次浏览 来自 问答
  • 需求的场景描述（希望解决的问题）

fixed在bottom的view，页面中有textarea，当焦点到textarea上面时，弹出输入法后，bottom的view会被输入法挡住

.bar {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 5rpx 10rpx 5rpx 10rpx;
  color: #555;
  background-color: ghostwhite;
  z-index: -1;
}
  • 希望提供的能力

如何设置bottom的view，在弹出输入法时仍然保持在底部？

2 回复

你好。请问有解决方案了吗。谢谢

1：可以设置cursor-spacing 的属性距离

2：使用bindfocus、bindblur 操作函数来动态设置底部组件框与底部之间的距离（外边距）：margin-bottom:30rpx;

js data里面设置一个变量：inputMarBot: false, //评论框聚焦时，让评论框距离底部的距离为30rpx

wxml 页面：使用三元表示设置style input组件的父元素容器与底部外边距：<view class='' style="{{inputMarBot?'margin-bottom:50rpx':''}}">（关键，主要跟input的聚焦和是去焦点有关）及input组件定义属性：bindfocus='settingMbShow' bindblur='settingMbNoShow'

回到顶部