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這塊就差不多了, 還有些細節我沒寫出來, 大家有疑問可以在下面評論哦, 或者直接查看代碼, 下一章將開始聯系人列表模塊.
最近公司開始新項目, 比較忙, 更新有點慢, 但我會堅持下去!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM