uni-app仿微信聊天uni_chatroom实例|uniapp仿微信

前几天给大家分享了一个uniapp自定义弹窗组件，今天给大家分享基于uniapp+vue+vuex等技术开发的仿微信界面App聊天室UniChatRoom，实现了发送消息、图片预览、红包、长按菜单、地图位置、仿朋友圈等功能。
uni-app自定义仿微信/ios弹出框：https://ask.dcloud.net.cn/article/36440

三端效果图如下：

使用技术：

• 编辑器：HBuilder X
• 技术框架：uni-app + vue
• 状态管理：Vuex
• iconfont图标：阿里字体图标库
• 自定义导航栏 + 底部Tabbar
• 弹窗组件：uniPop（基于uni-app封装模态弹窗）
• 测试环境：H5端 + 小程序 + App端（三端均兼容）

引入公共部分组件及样式

import Vue from 'vue'  
import App from './App'  

// >>>引入css  
import './assets/fonts/iconfont.css'  
import './assets/css/reset.css'  
import './assets/css/layout.css'  

// >>>引入状态管理  
import store from './store'  
Vue.prototype.$store = store  

// >>>引入公共组件  
import headerBar from './components/header/header.vue'  
import tabBar from './components/tabbar/tabbar.vue'  
import popupWindow from './components/popupWindow.vue'  
Vue.component('header-bar', headerBar)  
Vue.component('tab-bar', tabBar)  
Vue.component('popup-window', popupWindow)  

// >>>引入uniPop弹窗组件  
import uniPop from './components/uniPop/uniPop.vue'  
Vue.component('uni-pop', uniPop)  

Vue.config.productionTip = false  
App.mpType = 'app'  

const app = new Vue({  
    ...App  
})  
app.$mount()

uniapp朋友圈功能实现

/**  
 * @tpl 朋友圈模板  
 */  

<template>  
    <view class="flexbox flex_col">  
        <header-bar :isBack="true" title="朋友圈" :bgColor="{background: headerBarBackground}" transparent>  
            <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>  
            <text slot="iconfont" class="uni_btnIco iconfont icon-publish mr_5" @tap="handlePublish"></text>  
        </header-bar>  

        <view class="uni__scrollview flex1">  
            <view class="uni-friendZone">  
                ...  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                headerBarBackground: 'transparent'  
            }  
        },  
        onPageScroll : function(e) {  
            // console.log("滚动距离为：" + e.scrollTop);  
            this.headerBarBackground = 'rgba(65,168,99,'+e.scrollTop / 200+')'  
        },  
        methods: {  
            ...  
        }  
    }  
</script>  

<style scoped>  

</style>

uniapp使用scroll-view组件，通过判断聊天内容高度和scroll-view高度的大小设置滚动距离

<scroll-view id="scrollview" scroll-y="true" :scroll-top="scrollTop" style="height: 100%;">  
    <view class="uni-chatMsgCnt" id="msglistview">  
        <view class="msgitem">xxx</view>  
        <view class="msgitem">xxx</view>  
        <view class="msgitem">xxx</view>  
        ...  
    </view>  
</scroll-view>  

export default {  
    data() {  
        return {  
            scrollTop: 0,  
            ...  
        }  
    },  
    mounted() {  
        this.scrollToBottom()  
    },  
    updated() {  
        this.scrollToBottom()  
    },  
    methods: {  
        // 滚动至聊天底部  
        scrollToBottom(t) {  
            let that = this  
            let query = uni.createSelectorQuery()  
            query.select('#scrollview').boundingClientRect()  
            query.select('#msglistview').boundingClientRect()  
            query.exec((res) => {  
                // console.log(res)  
                if(res[1].height > res[0].height){  
                    that.scrollTop = res[1].height - res[0].height  
                }  
            })  
        },  
        ...  
    }  
}

作者：xiaoyan2015
链接： https://segmentfault.com/a/1190000020636455
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。