1

miaomiao/www/js/controllers/home.js

@@ -1,6 +1,6 @@
 (function (app) {
-    app.controller('homeCtrl', ["$scope", "$ionicTabsDelegate","$http", 'config', "$state", "msg", "$ionicPopover", "homeService","$ionicPopup"
-        , function ($scope, $ionicTabsDelegate,$http, config, $state, msg, $ionicPopover, homeService,$ionicPopup) {
+    app.controller('homeCtrl', ["$scope", "$ionicTabsDelegate", "$http", 'config', "$state", "msg", "$ionicPopover", "homeService", "$ionicPopup", "$timeout", "$ionicSideMenuDelegate"
+        , function ($scope, $ionicTabsDelegate, $http, config, $state, msg, $ionicPopover, homeService, $ionicPopup, $timeout, $ionicSideMenuDelegate) {
             $scope.$on('$ionicView.beforeEnter', function (viewResult) {
                 $ionicTabsDelegate.showBar(true);
             });
@@ -16,7 +16,9 @@
         }).then(function (popover) {
             $scope.popover = popover;
         });
-
+        $scope.toggleLeftSideMenu = function () {
+            $ionicSideMenuDelegate.toggleLeft();
+        };
         $scope.openFilter = function ($event) {
              // 一个精心制作的自定义弹窗
            var myPopup = $ionicPopup.show({

miaomiao/www/templates/home/index.html

@@ -1,6 +1,6 @@
 <ion-view view-title="瞄喵">
     <ion-nav-buttons side="left">
-        <button class="button button-clear" style="height: 30px; width: 30px" ng-click="openPopover($event)">
+        <button class="button button-clear" style="height: 30px; width: 30px" ng-click="toggleLeftSideMenu()">
             <img src="img/icon_menu.svg" style="height: 60%; width: 100%;">
         </button>
         <button class="button button-clear homeIcon" ng-click="openFilter()">
@@ -15,101 +15,118 @@
             <img src="img/icon_message_h.svg" style="height: 60%; width: 100%">
         </button>
     </ion-nav-buttons>
-    <ion-content>
-
-        <!--下拉刷新-->
-        <ion-refresher pulling-text="下拉刷新" on-refresh="load(true)">
-        </ion-refresher>
-        <div class="tabs-striped tabs-top">
-            <div class="tabs" style="top:0">
-                <a  ng-class="type=='hot'?'tab-item active':'tab-item'" ng-click="changetype('hot')">
-                   热门
-                </a>
-                <a ng-class="type=='trend'?'tab-item active':'tab-item'" ng-click="changetype('trend')">
-                    潮流
-                </a>
-                <a ng-class="type=='news'?'tab-item active':'tab-item'" ng-click="changetype('news')">
-                    最新
-                </a>
-            </div>
-        </div>
-        <div class="icontent">
-            <ion-slides options="data.sliderOptions" slider="data.sliderDelegate">
-                <ion-slide-page ng-repeat="banner in index.banners">
-                    <div class="box banner" style="height: 170px"><img ng-src="{{banner.value}}" style="width: 100%; height: 100%" /></div>
-                </ion-slide-page>
-            </ion-slides>
-            <div class="row" ng-if="index.users.length>0" style="background: #FAFAFA; height: 90px">
-                <div class="col col-10" style="margin-top: 7%" ng-click="next(1)">
-                    <i class="icon ion-ios-arrow-left"  style="font-size: 1.5rem; color: #00C3DA; line-height: 100%"></i>
-                </div>
-                <div class="col" style="overflow: hidden;">
-                     <span class="subcontent" ng-repeat="user in index.users">
-                         <img ng-click="clickAvatar($index)" ng-if="$index<4" ng-src="{{user.avatar |avator}}"  ng-class="{'defaultClass':$index !=chosedIndex,'chosenClass':$index ==chosedIndex}" style="padding: 0.5%;"/>
-                     </span>
-                </div>
-                <div class="col col-10" style="margin-top: 7%; text-align: right" ng-click="next(2)">
-                    <i class="icon ion-ios-arrow-right" style="font-size: 1.5rem; color: #00C3DA;"></i>
-                </div>
-            </div>
-            <div style="background:#E6E6E6;height:10px">
-            </div>
-            <div class="list">
-                <div class="item mainitem" ng-repeat="item in index.dreams">
-                    <div class="row">
-                        <div class="col avatarCol">
-                            <div class="fl" style="width: 30%">
-                                <img ng-src="{{item.user.avatar | avator}}"  ng-click="toUserDetail(item.id)" />
+    <ion-side-menus>
+        <ion-side-menu-content>
+           
+            <ion-content>
+                    <!--下拉刷新-->
+                    <ion-refresher pulling-text="下拉刷新" on-refresh="load(true)">
+                    </ion-refresher>
+                    <div class="tabs-striped tabs-top">
+                        <div class="tabs" style="top:0">
+                            <a ng-class="type=='hot'?'tab-item active':'tab-item'" ng-click="changetype('hot')">
+                                热门
+                            </a>
+                            <a ng-class="type=='trend'?'tab-item active':'tab-item'" ng-click="changetype('trend')">
+                                潮流
+                            </a>
+                            <a ng-class="type=='news'?'tab-item active':'tab-item'" ng-click="changetype('news')">
+                                最新
+                            </a>
+                        </div>
+                    </div>
+                    <div class="icontent">
+                        <ion-slides options="data.sliderOptions" slider="data.sliderDelegate">
+                            <ion-slide-page ng-repeat="banner in index.banners">
+                                <div class="box banner" style="height: 170px"><img ng-src="{{banner.value}}" style="width: 100%; height: 100%" /></div>
+                            </ion-slide-page>
+                        </ion-slides>
+                        <div class="row" ng-if="index.users.length>0" style="background: #FAFAFA; height: 90px">
+                            <div class="col col-10" style="margin-top: 7%" ng-click="next(1)">
+                                <i class="icon ion-ios-arrow-left" style="font-size: 1.5rem; color: #00C3DA; line-height: 100%"></i>
                             </div>
-                            <div class="myblock">
-                               <div>{{item.user.nickname}}<span>{{item.user.birthday | getage}}岁</span></div>
-                                <div class="mysecond">{{item.user.city}}</div>
+                            <div class="col" style="overflow: hidden;">
+                                <span class="subcontent" ng-repeat="user in index.users">
+                                    <img ng-click="clickAvatar($index)" ng-if="$index<4" ng-src="{{user.avatar |avator}}" ng-class="{'defaultClass':$index !=chosedIndex,'chosenClass':$index ==chosedIndex}" style="padding: 0.5%;" />
+                                </span>
                             </div>
-                        </div>
-                        <div class="col" style="text-align:right">
-                            <div style="margin-top:4px">
-                                <img ng-src="img/icon_follow.svg" class="iheart">
-                                <span style="color: #F16571">{{item.care_num}}</span>
-                                <span>人关注</span>
+                            <div class="col col-10" style="margin-top: 7%; text-align: right" ng-click="next(2)">
+                                <i class="icon ion-ios-arrow-right" style="font-size: 1.5rem; color: #00C3DA;"></i>
                             </div>
-                            <div  class="mysecond">剩余{{item.end_time | lastDate}}天</div>
                         </div>
-                    </div>
-                    <div ng-click="toDetail(item.id)">
-                        <img ng-src="{{item.img.pic}}" />
-                        <div class="homeDream">
-                            <p style="font-size: 16px">{{ item.name }}</p>
-                            <p>{{ item.about }}</p>
+                        <div style="background:#E6E6E6;height:10px">
+                        </div>
+                        <div class="list">
+                            <div class="item mainitem" ng-repeat="item in index.dreams">
+                                <div class="row">
+                                    <div class="col avatarCol">
+                                        <div class="fl" style="width: 30%">
+                                            <img ng-src="{{item.user.avatar | avator}}" ng-click="toUserDetail(item.id)" />
+                                        </div>
+                                        <div class="myblock">
+                                            <div>{{item.user.nickname}}<span>{{item.user.birthday | getage}}岁</span></div>
+                                            <div class="mysecond">{{item.user.city}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="col" style="text-align:right">
+                                        <div style="margin-top:4px">
+                                            <img ng-src="img/icon_follow.svg" class="iheart">
+                                            <span style="color: #F16571">{{item.care_num}}</span>
+                                            <span>人关注</span>
+                                        </div>
+                                        <div class="mysecond">剩余{{item.end_time | lastDate}}天</div>
+                                    </div>
+                                </div>
+                                <div ng-click="toDetail(item.id)">
+                                    <img ng-src="{{item.img.pic}}" />
+                                    <div class="homeDream">
+                                        <p style="font-size: 16px">{{ item.name }}</p>
+                                        <p>{{ item.about }}</p>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
-        <!--上拉更多-->
-        <ion-infinite-scroll ng-if="filter.hasMore" on-infinite="load(false)" distance="10%"></ion-infinite-scroll>
-    </ion-content>
+                    <!--上拉更多-->
+                    <ion-infinite-scroll ng-if="filter.hasMore" on-infinite="load(false)" distance="10%"></ion-infinite-scroll>
+</ion-content> 
+        </ion-side-menu-content>
+        <!-- Left menu -->
+        <ion-side-menu side="left" width="200">
+            <ion-header-bar class="expanded" menu-close>
+                喵喵
+            </ion-header-bar>
+            <ion-content class="stable-bg has-expanded-header">
+                <ion-list>
+                    <ion-item>
+                        筛选
+                    </ion-item>
+                </ion-list>
+            </ion-content>
+        </ion-side-menu>
+    </ion-side-menus>
     <script id="my-popover.html" type="text/ng-template">
         <ion-popover-view class="pview">
             <ion-content>
-             <div class="list">
-                 <a  class="item item-icon-left" ng-click="qrscan()">
-                     <i class="icon ion-qr-scanner"></i>
-                    扫一扫
-                 </a>
-                 <a class="item item-icon-left" ui-sref="app.home_add">
-                     <i class="icon ion-plus"></i>
-                     创造梦想
-                 </a>
-                 <a class="item item-icon-left" ui-sref="app.my">
-                     <i class="icon ion-android-person"></i>
-                   个人中心
-                 </a>
-                 <a class="item item-icon-left" ui-sref="app.home_collect">
-                     <i class="icon ion-ios-folder-outline"></i>
-                     我的收藏
-                 </a>
-             </div>
+                <div class="list">
+                    <a class="item item-icon-left" ng-click="qrscan()">
+                        <i class="icon ion-qr-scanner"></i>
+                        扫一扫
+                    </a>
+                    <a class="item item-icon-left" ui-sref="app.home_add">
+                        <i class="icon ion-plus"></i>
+                        创造梦想
+                    </a>
+                    <a class="item item-icon-left" ui-sref="app.my">
+                        <i class="icon ion-android-person"></i>
+                        个人中心
+                    </a>
+                    <a class="item item-icon-left" ui-sref="app.home_collect">
+                        <i class="icon ion-ios-folder-outline"></i>
+                        我的收藏
+                    </a>
+                </div>
             </ion-content>
         </ion-popover-view>
     </script>
-</ion-view>
+</ion-view>