您的位置：首页 > Web前端 > JavaScript

ionic静态购物车实现

2017-10-19 19:29 120 查看
前几篇对ionic进行了初步的了解，接下来我们要在实战中进行操作，对所学知识进行拼凑，达到真正的灵活运用。接下来我们做一个小demo，一个静态的购物车。例图效果：源码：

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

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                ionic
                                                javascript
                                                angular
                                                html
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航