IONIC多条聊天记渲染完毕后滚动到底部解决方案

置顶

天外野草

于 2016-09-20 10:42:18 发布

阅读量4k

点赞数 1

分类专栏： HTML5 Cordova ios HTML5混合应用开发技术栈文章标签： angular 解决方案聊天即时通讯

本文链接：https://blog.youkuaiyun.com/jiangbo_phd/article/details/52593616

版权

本文介绍了一个在IONIC应用中处理聊天场景的解决方案，当使用ng-repeat渲染大量聊天记录后，如何自动滚动到底部。通过创建一个directive，利用scope.$last判断最后一个记录渲染完成，并通过$eval执行finisheRender方法，实现在所有记录渲染完毕后的自动滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近开发一个混合即时通讯项目，有这样一个场景，当用户已经有很多条聊天记录后，再次进入后，需要显示所有的记录，然后自动滚动到底部。

滚动到底部实现起来比较简单，$ionicScrollDelegate就可以实现，但是angular的ng-repeat渲染是需要一段时间的，也就是说们需要知道什么时候ng-repeat才会渲染完成，才能真正滚动到页面底部。

研究了一下找到了一个解决方案：

为了达到复用的目的，我们需要写一个direcitve，上代码：

'use strict';

// @ngInject
module.exports = function enterAction() {
   
  return {
      restrict: 'A',
      link: function (scope, element, attr) {
   
          if

最低0.47元/天解锁文章