微信小程序页面遮挡解决

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

这段时间在做一个人工智能聊天客服,突然发现当聊天的语言变多的时候,发生最下面的聊天记录会被固定在下方的input输入框挡到,像下面这样子
微信小程序页面遮挡解决_第1张图片
很难受,于是修改聊天框所在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;
}

成功啦!
微信小程序页面遮挡解决_第2张图片
后面再写一篇关于input随键盘弹起改变高度的,不然被手机键盘挡到。

你可能感兴趣的:(微信小程序,小程序,前端)