微信小程序页面遮挡解决_微信小程序 弹起键盘时挡住了view内容

微信小程序解决输入框遮挡聊天界面问题

这段时间在做一个人工智能聊天客服，突然发现当聊天的语言变多的时候，发生最下面的聊天记录会被固定在下方的input输入框挡到，像下面这样子

很难受，于是修改聊天框所在view的margin-bottom，没什么用，因为页面高度不能写固定的，所以想来想去，找到一个好办法，在聊天容器下面加个小容器，设置高度就行

#wxml
<view class="mainbox">
<view wx:for="{{list}}" wx:key="index" class="{{item.role=='user'?'rightcontent':'leftcontent'}}">
  <image src="{{item.role=='user'?avatar:'../../public/aihead.jpg'}}" mode="widthFix" class="headlogo"/>
  <view class="{{item.role=='user'?'rightjian:':'leftjian'}}"></view>
  <view class="{{item.role=='user'?'user':'system'}}">{{item.content}}</view>
</view>
</view>
<view class="bulkhead">   //加上这个小容器
</view>
#wxss
.bulkhead
{
  height: 30rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

成功啦！

后面再写一篇关于input随键盘弹起改变高度的，不然被手机键盘挡到。