Ionic-wechat项目边开发边学（四）:可伸缩输入框,下拉刷新, 置顶删除

摘要

上一篇文章主要介绍了ion-list的使用, ion-popup的使用, 通过sass自定义样式, localStorage的使用, 自定义指令和服务. 这篇文章实现的功能有消息的置顶与删除, 了聊天详情页面, 可伸缩输入框, 下拉刷新聊天记录, 要介绍的知识点有:

1. filter orderBy的使用
2. 引入angular-elastic模块
3. 下拉刷新
4. keyboard插件的使用
5. 如何在真机中调试

先看效果图(键盘弹起会覆盖聊天记录, 已修复):

清晰效果见视频

filter orderBy的应用

聊天列表需要按时间顺序排列, 同时点击置顶后, 置顶的记录需要排在最上面, 这个效果就使用angularJS内置的过滤器
orderBy来排序, 使用方式

ng-repeat="item in items | orderBy : expression : reverse

这里的expression可以是function, angular expression, Array, 当为数组的时候, 首先按第一个排, 当相等的时候再按第二个排, 以此类推
reverse布尔值, 表示正序还是反序

所以我们只需要设置两个变量, 一个最后一条消息时间, 一个设置置顶的时间就可以实现置顶:

ng-repeat="message in messages | orderBy:['isTop', 'lastMessage.timeFrome1970']:true

可伸缩输入框

细心的人可能会发现, 微信的输入框超过一行后, 高度会变大的, 所以我们也来做一个可伸缩的输入框
Angular Elastic这个是一个autosize textareas的
angularJS插件, 我们需要融入到Ionic中, 首先把该插件源码放到js/目录下, 并在app.js中注入

angular.module('wechat', ['ionic', 'wechat.controllers', 'wechat.routes',
     'wechat.services', 'wechat.directives', 'monospaced.elastic'
      ])//注入monospaced.elastic

然后在textarea中添加msd-elastic指令

<textarea msd-elastic ng-model="foo">
  ...
</textarea>

做到这里, textare还是不能伸缩的, 因为ion-footer-bar的高度是固定的, 所以我们需要先动态调整ion-footer-bar
的高度, 在elastic.js中向上传播taResize事件, 这个名字可以自己定义

if (taHeight !== mirrorHeight) {
     scope.$emit('elastic:resize', $ta, taHeight, mirrorHeight);
     ta.style.height = mirrorHeight + 'px';
}   
 
scope.$emit('taResize', $ta); //添加此行
// small delay to prevent an infinite loop
$timeout(function() {
     active = false;
}, 1, false);

再在directives.js中创建一个指令:

     .directive('resizeFootBar', ['$ionicScrollDelegate', function($ionicScrollDelegate){
         // Runs during compile
         return {
             replace: false,
             link: function(scope, iElm, iAttrs, controller) {
                 //绑定taResize事件
                 scope.$on("taResize", function(e, ta) {
                     if (!ta) return;
                     var scroll = document.body.querySelector("#message-detail-content");
                     var scrollBar = $ionicScrollDelegate.$getByHandle('messageDetailsScroll');
                     var taHeight = ta[0].offsetHeight;
                     var newFooterHeight = taHeight + 10;
                     newFooterHeight = (newFooterHeight > 44) ? newFooterHeight : 44;
 
                     //调整ion-footer-bar高度
                     iElm[0].style.height = newFooterHeight + 'px';
                     //下面两行代码, 是解决键盘弹出覆盖聊天内容的bug
                     //第一行增加内容区高度
                     //第二行滑动到底部
                     scroll.style.bottom = newFooterHeight + 'px';
                     scrollBar.scrollBottom();
                 });
             }
         };
     }]);

最后再在ion-footer-bar中添加这个指令就行拉, 别忘了把左右图标固定到底部哦~

keyboard插件的使用

ionic-plugin-keyboard插件可以让你更轻松的处理键盘相关的事件
细心的人会发现, 上面的输入框在弹出键盘后会覆盖聊天记录的内容, 所以我们需要引入这个插件, 当弹出键盘的时候, 需要把scroll
滑到底部, 在项目目录下输入下面命令安装插件:

cordova plugin add ionic-plugin-keyboard

然后就可以注册键盘相关消息

window.addEventListener("native.keyboardshow", function(e){
               viewScroll.scrollBottom();
           });

这样的话, 就不会遮住聊天记录啦, 注意刚刚那个指令中的两行代码哦~

如何在真机中调试

调试键盘消息时, 电脑上不会弹出键盘, 就需要在手机上调试, 但是手机上的打印消息看不到, 如何调试呢?
相信大家跟我一样迫切需要这个功能, 给大家介绍一下利用chrome调试, 很强大哦~
首先手机连上电脑ionic run android安装好应用
再在chrome地址栏中输入chrome://inspect/#devices
然后点击inspect就行拉, 就跟调试网页一样哦, 很方便~

最后

到这里message这块就差不多了, 还有些细节我没写出来, 大家有疑问可以在下面评论哦, 或者直接查看代码, 下一章将开始联系人列表模块.
最近公司开始新项目, 比较忙, 更新有点慢, 但我会坚持下去!