即时聊天微信小程序代码
仿照hiapp,首页是朋友圈新闻,第二栏是通讯录,可以进行聊天。采用flex布局,像微信那样聊天,自己发的聊天在右侧。
<scroll-view scroll-y="true" class="timeline flex-rest-height">
<block wx:for="{{messages}}">
<view class="message flex-row {{item.from === 'sent' ? 'message-sent' : ''}}">
<text wx:if="{{!item.image}}" class="message-text {{item.from === 'sent' ? 'message-sent-text' : 'message-received-text'}}">{{item.text}}</text>
<image wx:else src="{{item.text}}" class="message-image"></image>
</view>
</block>
</scroll-view>
<view class="footer flex-row">
<view class="input-container flex-rest-width">
<input id="message" value="{{inputValue}}" placeholder="message..." class="message-input" bindchange="bindChange"/>
</view>
<view class="btn-area">
<button bindtap="sendMessage" class="send-message-btn" type="primary" size="mini">Send</button>
</view>
</view>
</view>
下载地址:项目工程