微信小程序解决输入框遮挡聊天界面问题
这段时间在做一个人工智能聊天客服,突然发现当聊天的语言变多的时候,发生最下面的聊天记录会被固定在下方的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;
}
成功啦!
后面再写一篇关于input随键盘弹起改变高度的,不然被手机键盘挡到。