直播系统开发，简单的聊天对话窗口界面

直播系统开发，简单的聊天对话窗口界面

wxml代码:

 

<!-- 简单版 -->
<view class="scroll-list">
    <block wx:for="{{chatList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
        <view wx:if="{{item.date}}" class="show-date">{{item.date}}</view>
        <view wx:if="{{item.type=='custom'}}" class="row tips-text">
            <text>{{login.id==item.msgId?'你':item.nickname}}撤回了一条消息</text>
        </view>
        <view class="{{login.id==item.msgId?'row row-self':'row'}}" wx:else>
            <view class="{{login.id==item.msgId?'head-self':'head-friend'}}">
                <image class="avatar" src="{{item.avatar}}"></image>
            </view>
            <view>
                <view wx:if="{{login.id!=item.msgId}}" class="nick">{{item.nickname}}</view>
                <view class="{{login.id==item.msgId?'message msg-self':'message msg-friend'}}">
                    <text>{{item.message}}</text>
                </view>
            </view>
        </view>
    </block>
</view>
<!-- 发送信息 -->
<view class="footer">
    <view class="row">
        <view class="input-box">
            <textarea class="text-area" placeholder-class="placeholder" show-confirm-bar="{{false}}" cursor-spacing="30" maxlength="500"
            disable-default-padding="{{true}}"
            confirm-hold="{{true}}" hold-keyboard="{{true}}" auto-height="false" placeholder="输入信息" bindinput="inputClick" value="{{content}}"></textarea>
        </view>
        <view class="send-btn" wx:if="{{content!=''}}">
            <text class="send-text" bindtap="sendClick">发 送</text>
        </view>
    </view>
</view>
 

​

json代码:

 

{
  "usingComponents": {},
  "navigationBarTitleText": "聊天对话窗",
  "navigationBarBackgroundColor": "#FF6347"
}

 

以上就是直播系统开发，简单的聊天对话窗口界面， 更多内容欢迎关注之后的文章