大佬教程收集整理的这篇文章主要介绍了IONIC多条聊天记渲染完毕后滚动到底部解决方案,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
最近开发一个混合即时通讯项目,有这样一个场景,当用户已经有很多条聊天记录后,再次进入后,需要显示所有的记录,然后自动滚动到底部。
滚动到底部实现起来比较简单,$ionicScrollDelegate就可以实现,但是angular的ng-repeat渲染是需要一段时间的,也就是说们需要知道什么时候ng-repeat才会渲染完成,才能真正滚动到页面底部。
为了达到复用的目的,我们需要写一个direcitve,上代码:
'use Strict';
// @ngInject
module.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!!!!!!
以上是大佬教程为你收集整理的IONIC多条聊天记渲染完毕后滚动到底部解决方案全部内容,希望文章能够帮你解决IONIC多条聊天记渲染完毕后滚动到底部解决方案所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。