Question

ionic3物理返回键怎么检测弹框是否打开

Answer 1

#387ef5 !default;
$calm: #11c1f3 : #33cd5f !default;
$energized;

这样就能看到效果了

自定义样式
可以看到上图有点丑!default;lib/
$positive;>还未定义, 先不绑定, 用实际的值代替!default;/h2>
<p class="rj-list-p"/p>: #886aea ;/ion-item>
</p></!default; .noReadMessages">scss/ 目录, 可以看到很多scss文件
├── _action-sheet.scss
├── _animations.scss
├── _backdrop.scss
├── _badge.scss
├── _bar.scss
├── _button-bar.scss
├── _button.scss
├── _checkbox.scss
├── _form.scss
├── _grid.scss
├── ionicons
├── ionic.scss
├── _items.scss
├── _list.scss
├── _loading.scss
├── _menu.scss
├── _mixins.scss
├── _modal.scss
...

这些都是官方的样式文件, 找到 items.scss 文件, 这个就是ion-item相关的样式, 再搜 border-radius 很快就能找到啦
具体的细节我就不说啦, 其它的修改都类似, 可以参考 我的代码
popup的使用
关于$ionicPopup的详细使用, 可以参考 官网
首先在 controllers.js 文件中添加一个controller:
.controller('messageCtrl', function($scope, $state, $ionicPopup, localStorageService, messageService) {
$scope.popup = {
isPopup: false,
index: 0
};
$scope.onSwipeLeft = function() {
$state.go("tab.friends");
};
$scope.popupMessageOpthins = function($index) {
$scope.popup.index = $index;
//这里通过$ionicPopup.show()方法创建了一个自定义的popup
$scope.popup.optionsPopup = $ionicPopup.show({
templateUrl: "templates/popup.html",
scope: $scope,
});
$scope.popup.isPopup = true;
};
//实现标为已读/未读, 注意$scope.popup.optionsPopup.close()方法
//用来关闭弹窗, 我竟然找了很久才发现这个接口
$scope.markMessage = function() {
var index = $scope.popup.index;
var message = $scope.messages[index];
if (message.showHints) {
message.showHints = false;
message.noReadMessages = 0;
}else{
message.showHints = true;
message.noReadMessages = 1;
}
$scope.popup.optionsPopup.close();
$scope.popup.isPopup = false;
messageService.updateMessage(message);
};

这里要注意两点
要在routes.js中将该controll传进去
需要通过自定义样式, 去掉自带的标题和按钮
//routes.js
.state('tab.message', {
url: '/message',
views: {
'tab-message': {
templateUrl: 'templates/tab-message.html',
controller: "messageCtrl"
}
}
})

自定义指令
细心的人会发现两个问题:
弹出popup时, 联系人列表没有动画效果
弹出popup后, 点击popup以外的地方, popup不能消失, 这两个问题, 就通过自定义指令来解决
首先在 directives.js 文件中添加 rjCloseBackDrop 指令, 用来解决上面第二个问题
.directive('rjCloseBackDrop', [function() {
return {
scope: false,//共享父scope
restrict: 'A',
replace: false,
link: function(scope, iElm, iAttrs, controller) {
//要在html上添加点击事件, 试了很久- -!
var htmlEl = angular.element(document.querySelector('html'));
htmlEl.on("click", function(event) {
if (event.target.nodeName === "HTML" &&
scope.popup.optionsPopup &&
scope.popup.isPopup) {
scope.popup.optionsPopup.close();
scope.popup.isPopup = false;
}
});
}
};
}])

再创建 rjHoldActive 指令, 用来解决第一个问题
.directive('rjHoldActive', ['$ionicGesture', '$timeout',
function($ionicGesture, $timeout, $ionicBackdrop) {
return {
scope: false,
restrict: 'A',
replace: false,
link: function(scope, iElm, iAttrs, controller) {
$ionicGesture.on("hold", function() {
iElm.addClass('active');
//300ms后恢复
$timeout(function() {
iElm.removeClass('active');
}, 300);
}, iElm);
}
};
}
])

最后分别在 ion-list 和 ion-item 上添加指令
<ion-list rj-close-back-drop>
<ion-item class="item-avatar"rj-hold-active ng-repeat="message in messages">;/h2>
<p class="rj-list-p",像这样
<img src="img/ben.png"
<>, 头像上的小红数字-->
<span class="message in messages">
<img ng-src="span>.name"<.;span>>
</ion-content>.
我们自己的样式;/span>
<h2 ng-bind=", relative to the built CSS in www/你在干什么;
<, 后面会讲是干嘛的-->
<ion-list rj-close-back-drop>/ion-view>

大家在试这个的时候, 由于'messages'.app; The path for our ionicons font files;ionic/.pic}}">
<.scss 文件;message;
<p ng-bind="ionic;
*/.
首先在项目目录下,运行命令
$ionic setup sass
$ionic serve

运行以后, 就会对 scss/ionic.app.scss 文件监控, 有修改: #ffc900 ;> rj-hold-active ng-repeat=": #444 .

For example;
<css
$ionicons-font-path: "h2>!default;span class="rj-push-right"12:30</?<
$assertive: #ef473a !default;
$royal;>, 可以看 这个 , 看完就差不多可以了, 直接修改这里就可以了!default;span class="rj-push-right"ion-view>: 0;
可以发现头像变成方的了, 那怎么知道修改这个变量呢?
打开 www/<.
打开 scss/ ng-bind="message.lastMessage.time"></ion-item class="item-avatar", 如下
/

//, you might change some of the default colors:

$light, 可以自己添加css文件link进来, 但官方推荐使用sass的方式修改, 关于sass的语法.scss file;*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables;<
<>, 非常方便;小王<rj-sm-red-icon"ion-list>!default, 会自动编译该文件!--这里的rj-close-back-drop是自定义指令, 需要我们自己修改样式;{{message;/p>
<span>./lib/ionic/fonts"<span class="rj-sm-red-icon"><p>
<1</

可以看到官方预定义的颜色几个颜色, 如果要修改预定义的颜色; on-hold="popupMessageOpthins($index)"页面布局
首先在'tab-message.html'
$balanced;onSwipeLeft()">
<;ion-content on-swipe-left="中添加聊天消息的布局
< ng-bind="message.lastMessage.content" ng-show="message.showHints", 直接在后面添加. 我们在后面添加
$item-avatar-border-radius;
</p>: #fff !default;
$stable: #f8f8f8 , 输出到 css/ionic.app.css
所以你每次修改保存scss文件后, 浏览器会看到实时的效果!--这个就是来了新消息;<message;
$dark