uni-app仿微信聊天APP|开发实战(3)

作者:涛涛 更新时间:2019-11-19 10:51:43 浏览次数:2568

温馨提示:当前尚未登录,请先登录后才能下载,评论,收藏和分享

  • 收藏
  • 评论
  • 分享

课前回顾


在上次的教程中,我们学习了底部导航栏的配置,主要也就是在pages.json里面进行了一些配置,其中要注意的是选中前和选中后的图片路径,千万不要搞混了。这次我们就来进行会话界面的设计。

选择UI模板


现在网上有着大量的聊天模板,我们就不重复造轮子了。为了大家方便上手,就在uni-app的插件市场找一个吧。


免费的ThorUI就比较适合我们了,样式也比较好看,我们可以选择其中的聊天模板。


看起来还不错啊,跟QQ差不多,大家可以在ThorUI里找到这个界面,直接把这个.vue文件复制过来就可以了。如果不喜欢圆形的头像,在样式里面修改一下就好了。


<template>
    <view class="container">
        <tui-swipe-action :actions="actions" @click="handlerButton" v-for="(item,index) in msgList" :key="index" :params="item">
            <template v-slot:content>
                <tui-list-cell @click="detail(item)" :last="true">
                    <view class="tui-msg-box">
                        <image :src="item.userProfile.avatar" class="tui-msg-pic" mode="widthFix"></image>
                        <view class="tui-msg-item">
                            <view class="tui-msg-name">{{item.userProfile.nick}}</view>
                            <view class="tui-msg-content">{{item.lastMessage.payload.text}}</view>
                        </view>
                    </view>

                    <view class="tui-msg-right" :class="[item.level==3?'tui-right-dot':'']">
                        <view class="tui-msg-time">{{ timestampToTime(item.lastMessage.lastTime) }}</view>
                        <tui-badge :type="item.level==2?'gray':'danger'" :dot="item.level==3" v-if="item.unreadCount>0">{{item.unreadCount}}</tui-badge>
                    </view>
                </tui-list-cell>
            </template>
        </tui-swipe-action>
        <tui-modal :show="modal.modal4" @cancel="hide4" :custom="true">
            <view class="tui-modal-custom">
                <view class="modal-custom-item" v-for="(item,index) in buttonlist" :key="index" @click="buttonTap(item)">
                    <tui-icon :name="item.type" size="24" color="#ffffff"></tui-icon>
                    <view style="text-align: left;width: 120upx;">{{item.text}}</view>
                </view>
            </view>
        </tui-modal>
    </view>
</template>

以上就是会话列表页的渲染代码,我用的是真实数据,所以先不用管那个item的内容。

小结


这次找好了聊天模板,下次我们就教大家如何引入腾讯的IMSDK,把真实的数据渲染上去。

发布评论:

提 交