摘要
上一篇文章主要介紹了ion-list的使用, ion-popup的使用, 通過sass自定義樣式, localStorage的使用, 自定義指令和服務. 這篇文章實現的功能有消息的置頂與刪除, 了聊天詳情頁面, 可伸縮輸入框, 下拉刷新聊天記錄, 要介紹的知識點有:
- filter orderBy的使用
- 引入angular-elastic模塊
- 下拉刷新
- keyboard插件的使用
- 如何在真機中調試
先看效果圖(鍵盤彈起會覆蓋聊天記錄, 已修復):
清晰效果見視頻
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這塊就差不多了, 還有些細節我沒寫出來, 大家有疑問可以在下面評論哦, 或者直接查看代碼, 下一章將開始聯系人列表模塊.
最近公司開始新項目, 比較忙, 更新有點慢, 但我會堅持下去!