微信小程序中聊天室的构建

html书写如下：

<!--pages/chatroomDetail/chatroomDetail.wxml-->

<view class="bgc"></view>
<view wx:if="{
  {loadingSocket}}">
  聊天室连接中...
</view>
<!-- 可以滚动的视图 -->
<scroll-view class="chat-container" scroll-y scroll-into-view="{
  {'k'+list[list.length-1].id}}">
<!-- 每一条消息 -->
  <view class="chat-item {
  {userName == item.from ? 'my-msg' : ''}}" wx:for="{
  {list}}" id="{
  {'k'+item.id}}">
    <view class="avatar">
      <image src="{
  {item.avatar}}">
      </image>
    </view>
    <view class="msg-box">
      <view class="nickname" wx:if="{
  {userName !== item.from}}">
        {
  {item.nickName}}
      </view>
      <view wx:if="{
  {item.type == 1}}" class="content-box">
        {
  {item.content}}
      </view>
      <view wx:elif="{
  {item.type==2}}" class="img-content" >
        <image src="{
  {item.content}}" mode="widthFix">
        </image>
      </view>
    </view>
  </view>
</scroll-view>

<view class="send-msg-container">
<!-- 做简易双向绑定  -->
    <input class="input" type="text" model:value="{
  {value}}" />
  <view class="action-box">
    <van-icon name="smile-o" class="icon" bind:tap="sendImg" />
    <van-button class="send-btn" square type="primary" bind:tap="sendMsg">发送</van-button>
  </view>
</view>

css书写如下：

/* pages/chatroomDetail/chatroomDetail.wxss */
/* pages/chat/index.wxss */
.bgc {
  background-color: #E1E0E5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
/* *****************消息区域***************** */
.chat-container {
  padding-bottom: 110rpx;
  height: 100vh;
  box-sizin