ionic静态购物车实现

迷南。 2022-06-06 20:19 144阅读 0赞

前几篇对ionic进行了初步的了解，接下来我们要在实战中进行操作，对所学知识进行拼凑，达到真正的灵活运用。接下来我们做一个小demo，一个静态的购物车。

例图效果：

![Center][]![Center 1][]

**![Center 2][]**![Center 3][]

源码：

### index.html ###

![Center 4][]

<!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/css/ionic.css" rel="stylesheet"/>
        <script type="text/javascript" src="lib/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, $http) {
                $scope.book_list = [];
    
                var urls = [
                    "", // 0 "book_list_1.json", // pageNo: 1 "book_list_2.json", // pageNo: 2 "book_list_3.json" // pageNo: 3 ];
    
                $scope.toggleLeft = function () {
                    $ionicSideMenuDelegate.toggleLeft();
                };
    
                var pageNo = 1;
    
                var loadData = function () {
                    var httpReq = $http.get(urls[pageNo]);
                    httpReq.success(function (data) {
                        $scope.book_list = $scope.book_list.concat(data);
                    }).error(function (data, status) {
                        console.log(status);
                    }).finally(function () {
                        $scope.$broadcast('scroll.infiniteScrollComplete');
                    });
                };
    
                loadData();
    
                $scope.doRefresh = function () {
                    $scope.book_list = [];
    
                    pageNo = 1;
                    loadData();
                };
    
                $scope.loadMore = function () {
                    if (pageNo++ > 3) {
                        pageNo = 3;
                        return;
                    }
    
                    loadData();
                };
            });
        </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>

### **cart.html** ###

![Center 5][]

<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>

home.html

![Center 6][]

<ion-view title="首页" class="home" ng-controller="HomeCtrl">
        <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 ng-repeat="book in book_list">
                    <div class="picture">
                        <img ng-src="{ { book.picture}}" width="128px" height="128px"/>
                    </div>
                    <div class="details">
                        <h2>{
       {
       book.title}}</h2>
    
                        <h3>{
       {
       book.description}}</h3>
    
                        <div>
                            <span>{
       { book.price | currency: "￥" }}</span>
                            <i class="icon ion-ios-cart"></i>
                        </div>
                    </div>
                </ion-item>
            </ion-list>
    
            <ion-infinite-scroll on-infinite="loadMore()" distance="1%" immediate-check="false"></ion-infinite-scroll>
        </ion-content>
    </ion-view>

mine.html

<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>

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;
    }

[Center]: https://img-blog.csdn.net/20171019193934092?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHk4MTk5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220607/c85b7d0e1de949e68bbb9f3c6887837f.png
[Center 2]: https://img-blog.csdn.net/20171019193946403?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHk4MTk5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: /images/20220607/19929df733ae4995b76936600e095196.png
[Center 4]: /images/20220607/7c56af20653c4509846884432535d684.png
[Center 5]: /images/20220607/0a9df34dc45043bd962c31dad3e9556b.png
[Center 6]: /images/20220607/3ca2fc74e696472f8a723fc607fb2cdf.png