Swiper中文论坛

标题: uni-app仿微信聊天实战|uniapp+swiper仿微信 [打印本页]
作者: xiaoyan2015    时间: 2019-10-13 11:16
标题: uni-app仿微信聊天实战|uniapp+swiper仿微信
今天分享的是基于UniApp+swiper+vuex+uniPop等技术实现开发的仿微信聊天App实例项目，表情滑动部分使用的是swiper组件，弹窗是自定义uniPop模态框。还实现了红包、地图定位、仿微信朋友圈等功能。



使用技术










引入公共组件及样式
  1. import Vue from 'vue'
  2. import App from './App'

  4. // >>>引入css
  5. import './assets/fonts/iconfont.css'
  6. import './assets/css/reset.css'
  7. import './assets/css/layout.css'

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

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

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

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

  28. const app = new Vue({
  29.     ...App
  30. })
  31. app.$mount()
复制代码
uniapp实现仿微信朋友圈效果
实现类似微信朋友圈页面滚动一定距离顶部导航栏由透明变背景色，通过onPageScroll函数实现自定义导航上下滑动自动调整导航栏的透明度

  1. /**
  2. * @tpl 朋友圈模板
  3. */

  5. <template>
  6.     <view class="flexbox flex_col">
  7.         <header-bar :isBack="true" title="朋友圈" :bgColor="{background: headerBarBackground}" transparent>
  8.             <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
  9.             <text slot="iconfont" class="uni_btnIco iconfont icon-publish mr_5" @tap="handlePublish"></text>
  10.         </header-bar>
  11.         
  12.         <view class="uni__scrollview flex1">
  13.             <view class="uni-friendZone">
  14.                 ...
  15.             </view>
  16.         </view>
  17.     </view>
  18. </template>

  20. <script>
  21.     export default {
  22.         data() {
  23.             return {
  24.                 headerBarBackground: 'transparent'
  25.             }
  26.         },
  27.         onPageScroll : function(e) {
  28.             // console.log("滚动距离为：" + e.scrollTop);
  29.             this.headerBarBackground = 'rgba(65,168,99,'+e.scrollTop / 200+')'
  30.         },
  31.         methods: {
  32.             ...
  33.         }
  34.     }
  35. </script>

  37. <style scoped>

  39. </style>
复制代码
借助scroll-view组件将聊天信息滚动到页面底部
  1. export default {
  2.     data() {
  3.         return {
  4.             scrollTop: 0,
  5.             ...
  6.         }
  7.     },
  8.     mounted() {
  9.         this.scrollToBottom()
  10.     },
  11.     updated() {
  12.         this.scrollToBottom()
  13.     },
  14.     methods: {
  15.         // 滚动至聊天底部
  16.         scrollToBottom(t) {
  17.             let that = this
  18.             let query = uni.createSelectorQuery()
  19.             query.select('#scrollview').boundingClientRect()
  20.             query.select('#msglistview').boundingClientRect()
  21.             query.exec((res) => {
  22.                 // console.log(res)
  23.                 if(res[1].height > res[0].height){
  24.                     that.scrollTop = res[1].height - res[0].height
  25.                 }
  26.             })
  27.         },
  28.         ...
  29.     }
  30. }
复制代码
今天就介绍到这里，后续会继续为大家分享项目实战案例。
原创
react仿微信web版聊天室|仿微信客户端react版
原创
html5语音即时聊天|仿微信语音效果|表情|定位


作者: abfeng112    时间: 2019-10-13 12:26
zheasd asagfagfadsgsdgsdgsd
作者: 林达斯    时间: 2019-10-14 17:30
DCloud的，还不错
作者: jerryvv    时间: 2019-10-17 13:46
看着还不错啊~~~66666
作者: 氵氵海    时间: 2019-10-17 23:10
用的swiper是uniapp的组件还是就是swiper？
作者: li823602243    时间: 2020-3-26 11:28
66666666666666666666
作者: maolangong    时间: 2020-4-1 15:16
做websocket开发，可以自己搭建，也可以试试第三方的websocket框架。我近期在使用的GoEasy这个框架，在应对我们项目这种突发性的高并发需求上，表现不错。有websocket使用需求的也可以去看看，地址：https://www.goeasy.io/
作者: sioono    时间: 2021-4-2 08:23
下载地址有没？
作者: zhouzy    时间: 2021-8-12 11:47
66666666666666666666666



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2