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

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

wxml代码:

 

1

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

​

json代码:

 

1	<br>{<br>  "usingComponents": {},<br>  "navigationBarTitleText": "聊天对话窗",<br>  "navigationBarBackgroundColor": "#FF6347"<br>}

 

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