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

以你之姓@ 2022-06-07 11:55 208阅读 0赞

首页的效果：

![Center][]

购物车的效果：

![Center 1][]

我的效果：

![Center 2][]

侧拉的效果：

![Center 3][]

\------------------------------------------------------------------------------------------------

代码：

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文件把图片放进去

![Center 4][]![Center 5][]![Center 6][]![Center 7][]![Center 8][]![Center 9][]

![Center 10][]

\------------------------------------------------------------------------------------------------

在购物车的包里创建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>

[Center]: /images/20220607/93fd4fe0f3ca4e339817ad94461fc2c7.png
[Center 1]: /images/20220607/2c701dabbdec4a53887186f3f457a203.png
[Center 2]: /images/20220607/7b8359158bc94c7385b9cd2350bfd89b.png
[Center 3]: /images/20220607/f65180eb889c4a0085155669b363bd38.png
[Center 4]: https://img-blog.csdn.net/20171020134003487?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfNDAyNTkxOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 5]: https://img-blog.csdn.net/20171020134024152?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfNDAyNTkxOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: https://img-blog.csdn.net/20171020134038586?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfNDAyNTkxOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 7]: https://img-blog.csdn.net/20171020134049366?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfNDAyNTkxOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 8]: https://img-blog.csdn.net/20171020134110976?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfNDAyNTkxOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 9]: /images/20220607/e464e49c1b4f40b7b643f18c4f54be24.png
[Center 10]: /images/20220607/ae533d7ec4b74983a02b7d2d15524f0f.png