WeChat アプレット ページ オクルージョン ソリューション

WeChat アプレットは入力ボックスがチャット インターフェイスをブロックする問題を解決します

この間、人工知能によるチャットカスタマーサービスの仕事をしていたのですが、チャット言語が増えると、一番下のチャットレコードが下の固定入力ボックスでブロックされてしまうことに気づき、不快になったので、チャットを修正しました。ボックスが配置されているビューのマージンボトムは、ページの高さを固定できないため役に立たないため、よく考えた結果、チャットコンテナの下に小さなコンテナを追加する良い方法を見つけました。高さを設定します。

#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;
}

成功！

キーボードが跳ね上がると入力の高さがどのように変化するかについては、後で記事を書きます。そうしないと、携帯電話のキーボードによってブロックされます。