2.scss使用经验：每个页面都有自己的scss文件，我在使用时，发现几个页面的css定义会影响，就是页面2可以用页面1的css定义造成干扰的现象，后来发现，每个scss文件里有个页面定义，我们只要把当前页面的css定义放在这个页面定义就行，实现了css分离。（）本人刚学习网页编程，一切都在探索中）。示例如下：
age-page3 {
.page {
display: flex
align-items: center
text-align: center
margin: 0 auto
height: 100%
ackground-color: #abaaaa
adding-top: 5px
adding-bottom: 5px
// margin-top: 2px
这个page属性就放在了page-page3的大括号里面，保证了这个css定义只影响当前页面。
CSS中通过四个伪类来定义链接的样式，分别是：
a:link 链接默认的样式
a:visited 链接已被访问过时的样式
a:hover 鼠标悬浮在链接上的样式
a:active 点击链接时候的样式
一般定义这四种样式的是“LVHA”的顺序来写样式，不然可能出现样式覆盖问题；
定义class样式一般分两种,一种在a标签上，一种在a标签外面，实例如下：
<style type="text/css">LVHA.aaa a:link{color:redtext-decoration:nonefont-size:14px}
.aaa a:visited{color:yellowtext-decoration:nonefont-size:14px}
.aaa a:hover{color:bluetext-decoration:nonefont-size:14px}
.aaa a:active{color:greentext-decoration:nonefont-size:14px}
</style>
<div class="aaa"><a href="#">在a标签外的标签加class</a></div><br />
<style type="text/css">LVHA
a.bbb:link{color:redtext-decoration:nonefont-size:14px}
a.bbb:visited{color:yellowtext-decoration:nonefont-size:14px}
a.bbb:hover{color:bluetext-decoration:nonefont-size:14px}
a.bbb:active{color:greentext-decoration:nonefont-size:14px}
</style>
<a href="#" class="bbb">在a标签加</a>
页面布局首先在'tab-message.html'中添加聊天消息的布局<ion-view> <ion-content on-swipe-left="onSwipeLeft()"><!--这里的rj-close-back-drop是自定义指令, 后面会讲是干嘛的--><ion-list rj-close-back-drop> <ion-item class="item-avatar" on-hold="popupMessageOpthins($index)" rj-hold-active ng-repeat="message in messages"><img ng-src="{{message.pic}}"><!--这个就是来了新消息, 头像上的小红数字--><span class="rj-sm-red-icon" ng-show="message.showHints"><p ng-bind="message.noReadMessages"></p></span><h2 ng-bind="message.name"></h2><p class="rj-list-p" ng-bind="message.lastMessage.content"></p><span class="rj-push-right" ng-bind="message.lastMessage.time"></span> </ion-item></ion-list> </ion-content></ion-view>大家在试这个的时候, 由于'messages'还未定义, 先不绑定, 用实际的值代替,像这样<img src="img/ben.png"><span class="rj-sm-red-icon"><p>1</p></span><h2>小王</h2><p class="rj-list-p">你在干什么?</p><span class="rj-push-right">12:30</span>这样就能看到效果了自定义样式可以看到上图有点丑, 需要我们自己修改样式, 可以自己添加css文件link进来, 但官方推荐使用sass的方式修改, 关于sass的语法, 可以看 这个 , 看完就差不多可以了.首先在项目目录下,运行命令$ionic setup sass$ionic serve运行以后, 就会对 scss/ionic.app.scss 文件监控, 有修改, 会自动编译该文件, 输出到 css/ionic.app.css所以你每次修改保存scss文件后, 浏览器会看到实时的效果, 非常方便.打开 scss/ionic.app.scss 文件, 如下/*To customize the look and feel of Ionic, you can override the variablesin ionic's _variables.scss file.For example, you might change some of the default colors:$light: #fff !default$stable: #f8f8f8 !default$positive:#387ef5 !default$calm:#11c1f3 !default$balanced:#33cd5f !default$energized: #ffc900 !default$assertive: #ef473a !default$royal: #886aea !default$dark:#444 !default*/// The path for our ionicons font files, relative to the built CSS in www/css$ionicons-font-path: "../lib/ionic/fonts" !default可以看到官方预定义的颜色几个颜色, 如果要修改预定义的颜色, 直接修改这里就可以了.我们自己的样式, 直接在后面添加. 我们在后面添加$item-avatar-border-radius: 0可以发现头像变成方的了, 那怎么知道修改这个变量呢?打开 www/lib/ionic/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 = falsemessage.noReadMessages = 0 }else{message.showHints = truemessage.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,//共享父scoperestrict: '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">
