【微信小程序】聊天界面代码

旧城等待， 2023-10-11 23:28 63阅读 0赞

### ![f5d6ca65249e4afc95c6b2d0c7800410.png][] ###

### 1. chat.wxml ###

<view wx:if="{
       {loading}}" style="position:absolute; top:45%;left:50%;transform: translate(-50%, -50%);">
        <image src="/image/flow.gif" style="width: 100px; height: 100px;"></image>
        </view>
        
        <view>
        <view style="display: flex; align-items: center;">
         <image src="/image/back.png" style="width: 60rpx; height:60rpx; margin-top: 30rpx; margin-left: 10rpx; margin-bottom: 30rpx" bindtap="toBackClick"></image>
         <view style="color: white; margin-top: 2rpx;margin-left: 30rpx; font-size: 35rpx; font-weight: 550;">
         {
       {name}}
         </view>
        </view>
        <view style="color: white; text-align: center; margin-bottom: 10rpx">{
       {time}}</view>
         <scroll-view scroll-y scroll-into-view='{
       {toView}}' style='height: {
       {scrollHeight}};'>
          
          <block wx:key="index" wx:for='{
       {msgList}}' wx:for-index="index">
         
           
           <view wx:if='{
       {item.speaker=="server"}}' id='msg-{
       {index}}' style='display: flex; padding: 2vw 11vw 2vw 2vw;'>
            <view style='width: 11vw; height: 11vw;'>
             <image style='width: 11vw; height: 11vw; border-radius: 50%;' src='{
       {avatar_left}}'></image>
            </view>
            <view style='width: 4vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'>
             <image style='width: 4vw;' mode='widthFix'></image>
            </view>
            <view class='leftMsg' style="color:white">{
       {item.content}}</view>
           </view>
         
           
           <view wx:else id='msg-{
       {index}}' style='display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;'>
            <view class='rightMsg' style="color: white">{
       {item.content}}</view>
            <view style='width: 4vw; height: 11vw; margin-right: 0.5vw; display: flex; align-items: center; z-index: 9;'>
             <image style='width: 4vw;' mode='widthFix'></image>
            </view>
            <view style='width: 11vw; height: 11vw;'>
             <image style='width: 11vw; height: 11vw; border-radius: 50%;' src='{
       {avatar_right}}'></image>
            </view>
           </view>
         
          </block>
          
         
          
          <view style='width: 100%; height: 18vw;'></view>
         </scroll-view>
       
         <view class='inputRoom' style='bottom: {
       {inputBottom}}'>
          <image style='width: 7vw; margin-left: 3.2vw;' src='../../image/chat-photo.png' mode='widthFix'></image>
          <input bindconfirm='sendClick' adjust-position='{
       {false}}' value='{
       {inputVal}}' confirm-type='send' style="color: white"></input>
         </view>
        </view>

### **2. chat.js** ###

### 3. chat.wxss ###

/* pages/contact/contact.wxss */
         
        page {
          background-color: black;
         }
          
         .inputRoom {
          width: 100vw;
          height: 16vw;
          background-color: black;
          position: fixed;
          bottom: -10px;
          display: flex;
          align-items: center;
          z-index: 20;
         }
          
         input {
          width: 76vw;
          height: 9.33vw;
          background-color: #262626;
          border-radius: 40rpx;
          margin-left: 2vw;
          padding: 0 3vw;
          font-size: 28rpx;
          color: #444;
         }
          
         .leftMsg {
          font-size: 35rpx;
          color: #444;
          line-height: 7vw;
          padding: 2vw 2.5vw;
          background-image: linear-gradient(to right, #da22ff, #9733ee);
          margin-left: -1.6vw;
          border-radius: 10rpx;
          z-index: 10;
         }
          
         .rightMsg {
          font-size: 35rpx;
          color: #444;
          line-height: 7vw;
          padding: 2vw 2.5vw;
          background-image: linear-gradient(to left, #ec008c, #fc6767);
          margin-right: -1.6vw;
          border-radius: 10rpx;
          z-index: 10;
         }

[f5d6ca65249e4afc95c6b2d0c7800410.png]: https://img-blog.csdnimg.cn/f5d6ca65249e4afc95c6b2d0c7800410.png