WeChat applet solves the problem of input box blocking chat interface
During this time, I was working as an artificial intelligence chat customer service. I suddenly discovered that when the number of chat languages increased, the bottom chat record would be blocked by the fixed input box below. It was uncomfortable like this, so I modified the chat. The margin-bottom of the view where the box is located is of no use, because the page height cannot be fixed, so after much deliberation, I found a good way to add a small container under the chat container and set the height.
#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;
}
Success!
I will write an article later about how the input changes height as the keyboard bounces up, otherwise it will be blocked by the mobile phone keyboard.