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