购物车（侧拉 、购物 、个人中心）

首页的效果：

购物车的效果：

我的效果：

侧拉的效果：

------------------------------------------------------------------------------------------------

代码：

1、创建购物车的包

在购物车的包里创建css包在css里面创建main.css文件是给图片文字调动距离的或他们的边距。

.home .picture {
    float: left;
}

.home .details h3 {
    margin-top: 16px;
}

.home .details div {
    margin-top: 48px;
}

.home .details span {
    color: red;
    font-size: large;
}

.home .details .ion-ios-cart {
    position: absolute;
    right: 16px;
}

.cart .picture {
    float: left;
}

.cart .details h3 {
    margin-top: 16px;
    color: red;
    font-size: large;
}

.cart .details div {
    margin-top: 16px;
}

.cart .details div .ion-android-delete {
    position: absolute;
    right: 16px;
}

.cart .item {
    border-width: 0;
}

.cart hr {
    border: 1px dotted #999;
    margin-left: 12px;
    margin-right: 12px;
}

.mine .avatar {
    width: 100%;
    height: 160px;
    background: url("../img/mine_bg.jpg") no-repeat;
    background-size: cover;
    text-align: center;
}

.mine .avatar img {
    border-radius: 50%;
    margin-top: 30px;
}

------------------------------------------------------------------------------------------------

在购物车的包里创建img文件把图片放进去

------------------------------------------------------------------------------------------------

在购物车的包里创建lib依赖包

------------------------------------------------------------------------------------------------

在购物车的包里创建views的文件

1、views文件包里面创建cart文件

<ion-view title="购物车" class="cart">
    <ion-content>
        <ion-list>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | currency: "￥" }}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

------------------------------------------------------------------------------------------------

2、views文件包里面创建home文件

<ion-view title="首页" class="home">
    <ion-nav-buttons side="left">
        <button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>

    <ion-content>
        <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>

        <ion-list>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

------------------------------------------------------------------------------------------------

3、views文件包里面创建mine文件

<ion-view title="个人中心" class="mine">
    <ion-nav-buttons side="right">
        <button class="button button-icon ion-ios-compose-outline" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>

    <ion-content>
        <div class="avatar">
            <img src="img/mine_avatar.jpg" width="80px" height="80px"/>

            <p>姓名</p>
        </div>

        <div class="list">
            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-clipboard"></i>
                我的订单
                <i class="icon ion-ios-arrow-right"></i>
            </a>

            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-star"></i>
                我的收藏
                <i class="icon ion-ios-arrow-right"></i>
            </a>

            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-gear-a"></i>
                设置
                <i class="icon ion-ios-arrow-right"></i>
            </a>
        </div>
    </ion-content>
</ion-view>

------------------------------------------------------------------------------------------------

在购物车包里创建一个index.html包

<!DOCTYPE html>
<html ng-app="BShop">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>
    <link href="css/main.css" rel="stylesheet"/>
    <title>书店</title>
    <script type="text/javascript">
        var BShop = angular.module("BShop", ["ionic"]);
        BShop.config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider.state("home", {
                url: "/home",
                views: {
                    "view-home": {
                        templateUrl: "views/home/home.html",
                        controller: "HomeCtrl"
                    }
                }
            }).state("cart", {
                url: "/cart",
                views: {
                    "view-cart": {
                        templateUrl: "views/cart/cart.html",
                    }
                }
            }).state("mine", {
                url: "/mine",
                views: {
                    "view-mine": {
                        templateUrl: "views/mine/mine.html",
                    }
                }
            });

            $urlRouterProvider.otherwise("home");
        });

        BShop.controller("HomeCtrl", function ($scope, $ionicSideMenuDelegate) {
            $scope.toggleLeft = function () {
                $ionicSideMenuDelegate.toggleLeft();
            }
        });
    </script>
</head>
<body>
<ion-nav-bar></ion-nav-bar>

<ion-side-menus>

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios"></ion-nav-bar>
        <ion-nav-view animation="slide-left-right">

            <ion-nav-view name="view-home"></ion-nav-view>

        </ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left" class="mine">

        <header class="bar bar-header bar-stable">
            <h1 class="title">个人中心</h1>
        </header>

        <ion-content class="has-header">
            <div class="avatar">
                <img src="img/mine_avatar.jpg" width="80px" height="80px"/>

                <p>姓名</p>
            </div>

            <div class="list">
                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-clipboard"></i>
                    我的订单
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-star"></i>
                    我的收藏
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-gear-a"></i>
                    设置
                    <i class="icon ion-ios-arrow-right"></i>
                </a>
            </div>
        </ion-content>

    </ion-side-menu>
</ion-side-menus>

<ion-tabs class="tabs-positive tabs-icon-top">
    <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">
    </ion-tab>

    <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">
        <ion-nav-view name="view-cart"></ion-nav-view>
    </ion-tab>

    <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">
        <ion-nav-view name="view-mine"></ion-nav-view>
    </ion-tab>
</ion-tabs>
</body>
</html>