IONIC多条聊天记渲染完毕后滚动到底部解决方案
2016-09-20 10:42
369 查看
最近开发一个混合即时通讯项目,有这样一个场景,当用户已经有很多条聊天记录后,再次进入后,需要显示所有的记录,然后自动滚动到底部。
滚动到底部实现起来比较简单,$ionicScrollDelegate就可以实现,但是angular的ng-repeat渲染是需要一段时间的,也就是说们需要知道什么时候ng-repeat才会渲染完成,才能真正滚动到页面底部。
研究了一下找到了一个解决方案:
为了达到复用的目的,我们需要写一个direcitve,上代码:
上面的代码中scope.$last就是用来判断是否是最后一天记录被渲染,实话讲,angular为开发想到的语法糖真得是很多。
判断好最好一个后,需要通知一个事件,用到的就是$eval这个方法,其主要作用就是, 可计算某个字符串,并执行其中的的 JavaScript 代码。
那么如何使用呢:
之后,我么在control中声明一个finisheRender()的方法就会被调用了。
so easy!!!!!!
滚动到底部实现起来比较简单,$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!!!!!!
相关文章推荐
- 聊天窗口内容滚动到底部的方法scrollTop和scrollIntoView
- IONIC页面底部被遮住,无法向上滚动问题解决方案
- 关于聊天室文字聊天(ListView 显示数据变化后滚动到最底部 )
- 使用ionic框架的<ion-scroll>进行水平滚动时,导致页面难以上下滑动的解决方案
- ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
- ionic 中默认安装后,安卓的导航在顶部,需要移到底部的解决方案
- ListView数据更新后,自动滚动到底部(聊天时常用)
- ionic之app.js中的路由配置关系和导航居底部的解决方案
- ListView数据更新后,自动滚动到底部(聊天时常用)| Listview Scroll to the end of the list after updating the list
- ionic 中默认安装后导航在底部解决方案
- ListView数据更新后,自动滚动到底部(聊天时常用)| Listview Scroll to the end of the list after updating the list
- ionic进入多级目录以后隐藏底部导航栏(tabs)解决方案
- 如何解决IONIC页面底部被遮住无法向上滚动问题
- 如何解决IONIC页面底部被遮住无法向上滚动问题
- vue 聊天页面实现滚动条实时滚动至最底部
- ionic关于隐藏底部tabs终极解决方案
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
- ionic 中默认安装后导航在底部解决方案
- UIScrollView 默认滚动到最底部 --比如聊天界面
- ionic 滚动bug 解决方案