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
原创粉丝点击