uniapp聊天室动画加载新消息

这段时间一直在利用uniapp做聊天室的功能，这里分享下发送新消息，接收新消息怎么像QQ那样滚动加载。

首先我是查了一下网上的朋友，看了下大多都是使用scroll-top实现的，所以我也试了一下这个东西，确实可以实现，但是他获取dom的速度着实让人着急，而且不大适用加载历史记录，因为太慢了，我不知道网友是不是有更好的方式加载聊天记录，我这边不管怎么加载都会延迟一会，所以会跳动一下，看着让人着实难受，所以我是写了一个opacity延迟一会再显示，让人看起来舒服一点，

好了，上边纯属瞎扯，进入正题，我这里使用也是scroll-view这个组件，不过我是用是scroll-into-view锚点的方式加载历史数据，分页，发送消息以及新消息，历史数据和分页我是直接加载的没有使用动画滚动，发送和新消息使用了滚动，动画是否使用用的是 :scroll-with-animation="animation"这个鬼东西控制的，上代码。

<scroll-view id="scrollview" @scroll="chatScroll" class="chat-window" :scroll-y="true" :style="{'max-height': style.contentViewHeight + 'px'}":scroll-with-animation="animation" @scrolltoupper="scrolltouppe" :scroll-into-view="toView" >

然后在你聊天记录里搞个id，animation是在data里定义的布尔值，这里我举个例子，代码太多就不复制

<view v-for="(item,index) in ForchatData" >
这里是你的消息内容，图片，语音，文字等等吧。
<view style="height: 40upx;clear: both;"  :id="'toView'+index"></view>
ID就是写在上边就可以，当然你也可以写在循环上边的标签，不过我试了一下，因为锚点大家都知道是跳到标签的上边框，所以如果写在上边就会出现底下部分被遮盖，所以写在最后比较好点
</view>

然后现在就可以使用了，注意这里因为历史记录加载过慢，所以刚加载的时候你需要写在nextTick里面，如下

that.$nextTick(function() {setTimeout(() => {that.contentViewMain();                             }, 20)
})

这里以防万一我又加了一个延迟，不影响。看下contentViewMain里面写的什么，如下：

contentViewMain() {let that = this;that.toView = ""that.$nextTick(function() {that.toView = "toView" + (that.ForchatData.length - 1)})},

首先我这里先写了一个that.toView =
“”，因为你直接改that.toView他默认不变，所以先置空再赋值就有作用了，that.ForchatData这个东西就是你的消息数据，因为上边咱们提到只在有新消息和发送才会启动动画，所以加载历史消息之前咱的that.animation
= false;，然后在发文字，发图片，发语音这些之前再that.animation = true;并且调用下咱的锚点函数this.contentViewMain()就可以实现滚动发送新消息了。

这样会比scroll-top省很多代码。兼容性的话，安卓我是真机测试没啥问题，ios还没测。我看uniapp对于scroll-into-view并没有写兼容问题，另外说下一个小问题，就是上边不管用scroll-top还是scroll-into-view，真机上上拉分页的时候都会先跳到顶部再回来，这点很让人头疼，等解决这个问题再补上。

uniapp聊天室动画加载新消息相关推荐

前端加载动画/加载等待动画
在加载前端的数据的时候,很多时候不能用进度条来衡量不定数据量.此时加载动画就有用武之地了.可以在数据请求时显示加载动画,等动画加载完成再隐藏加载动画,让前端更具交互友好性. 网上百度了很多关于这方面的 ...
一款炫酷Loading动画--加载失败
简介上一篇文章一款炫酷Loading动画–加载成功,给大家介绍了成功动画的绘制过程,这篇文章将接着介绍加载失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比较简单了. 动画结构分 ...
Spine动画加载优化思路之 Spine动画加载问题
本文对于Spine动画加载的流程进行了修改,使用了懒加载的方式实现Spine动画的按需加载,有效地降低Spine动画的堆内存分配.文章包括思路分析,代码详解,优化前后的性能对比. <Spin ...
环形动画加载视图AnimatedCircleLoadingView
2019独角兽企业重金招聘Python工程师标准>>> 环形动画加载视图AnimatedCircleLoadingView AnimatedCircleLoadingView是基于A ...
环形动画加载视图AnimatedCircleLoadingView
环形动画加载视图AnimatedCircleLoadingView AnimatedCircleLoadingView是基于Android手表动画android-watch-loading-anima ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
uniapp 开发h5 优化加载速度
uniapp 开发h5 优化加载速度 1.选择manifest.json.点击H5配置.勾选发行时启用摇树优化这个功能可以减少网站体积加快首页渲染速度 2.配置nginx服务器,启用gzip压缩,示 ...
docker加载新的镜像后repository和tag名称都为none的解决方法
docker加载新的镜像后repository和tag名称都为none的解决方法参考文章: (1)docker加载新的镜像后repository和tag名称都为none的解决方法 (2)https: ...
android 动画间隔时间,Android使用View Animation实现动画加载界面
之前分别介绍了View Animation和Drawable Animation,学了就要用啊,今天给大家一个使用View Animation实现动画加载界面的实现. 首先先看一下实现效果. 下面是实 ...

uniapp聊天室动画加载新消息

uniapp聊天室动画加载新消息相关推荐

最新文章

热门文章