IONIC多条聊天记渲染完毕后滚动到底部解决方案
来源:互联网 发布:淘宝美女模特 编辑:程序博客网 时间:2024/05/27 20:11
最近开发一个混合即时通讯项目,有这样一个场景,当用户已经有很多条聊天记录后,再次进入后,需要显示所有的记录,然后自动滚动到底部。
滚动到底部实现起来比较简单,$ionicScrollDelegate就可以实现,但是angular的ng-repeat渲染是需要一段时间的,也就是说们需要知道什么时候ng-repeat才会渲染完成,才能真正滚动到页面底部。
研究了一下找到了一个解决方案:
为了达到复用的目的,我们需要写一个direcitve,上代码:
'use strict';// @ngInjectmodule.exports = function enterAction() { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { scope.$eval(attr.finishRender); } }, };};
上面的代码中scope.$last就是用来判断是否是最后一天记录被渲染,实话讲,angular为开发想到的语法糖真得是很多。
判断好最好一个后,需要通知一个事件,用到的就是$eval这个方法,其主要作用就是, 可计算某个字符串,并执行其中的的 JavaScript 代码。
那么如何使用呢:
<ion-list> <ion-item ng-repeat="msgItem in chat.messageList" finish-render="finishRender()"> </ion-item></ion-list>
之后,我么在control中声明一个finisheRender()的方法就会被调用了。
so easy!!!!!!
1 0
- IONIC多条聊天记渲染完毕后滚动到底部解决方案
- 滚动条到底部
- SWT带垂直滚动条的Text自动滚动到底部(比如显示聊天信息)
- vue 每次渲染完页面后div的滚动条保持在最底部
- 滚动条滚动到最底部
- 将滚动条滚动到最底部
- 将滚动条滚动到最底部
- jquery 滚动条滚动到底部
- 滚动条滚动到底部和顶部
- js 判断滚动条滚动到底部
- JQuery实现浏览器的滚动条滚动到底部后加载数据
- JQuery实现浏览器的滚动条滚动到底部后加载数据
- jquery中点击某元素后滚动条滚动到某元素位置或底部
- 滚动条循环,判断滚动条滚动到底部
- ListView数据更新后,自动滚动到底部(聊天时常用)
- 关于聊天室文字聊天(ListView 显示数据变化后滚动到最底部 )
- 页面加载完毕后滚动条自动滚动
- 页面加载完毕后滚动条自动滚动一定位置
- iOS10 适配
- 并行编程(3):PLinq
- 针对portmap 的DDOS攻击
- java 计算时间差
- find命令的使用技巧
- IONIC多条聊天记渲染完毕后滚动到底部解决方案
- hdu 2191 悼念512汶川大地震遇难同胞——珍惜现在,感恩生活
- 如何跳到系统设置里的各种设置界面
- iOS循环引用问题
- button获取验证码 点击倒计时
- 彻底理解PHP的SESSION机制
- 大数据可视化的最新动态
- NewtonSoft.JSON.dll LitJson.dll
- 百度霸屏截流量抢粉丝技术 没点儿行动力千万别点击