您的位置：首页 > 理论基础 > 计算机网络

基于购物车更改完整http请求数据改变代码--首页与主要代码

2017-10-20 20:02 726 查看

//主要代码

<!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">
<!--应用css文件-->
<link href="css/css.css" rel="stylesheet">
<link href="ionic-v1.3.3/css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="ionic-v1.3.3/js/ionic.bundle.js"></script>
<title></title>
<script type="text/javascript">
var BShop = angular.module("BShop
4000
", ["ionic"]);
BShop.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("home",{
//路径
url:"/home",
views:{
"view-home":{
templateUrl:"home/home.html",
controller:"HomeCtrl"
}
}
}).state("cart",{
url:"/cart",
views:{
"view-cart":{
templateUrl:"cart/cart.html"

}
}
}).state("mine",{
url:"/mine",
views:{
"view-mine":{
templateUrl:"mine/mine.html"

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

BShop.controller("HomeCtrl", function ($scope, $ionicSideMenuDelegate,$http) {
$scope.toggleLeft = function () {
//侧滑
$ionicSideMenuDelegate.toggleLeft();
}
$scope.book_list = [];
//为路径定义一个数组
var urls = [
"",
"book_list_1.json", // pageNo: 1
"book_list_2.json", // pageNo: 2
"book_list_3.json"  // pageNo: 3
];
//定义页数默认为第一页
var page = 1;
//刷新方法
var loadData = function(){
//获取路径(第一页)
var httpReq = $http.get(urls[page]);
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 = [];
page = 1;
loadData();
};
//下拉加载
$scope.loadMore = function(){
if(page++>3)
{
page=3;
return;
}
loadData();
};
});
</script>
</head>
<body>
<!--最上面的title-->
<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-nav-view name="view-home"></ion-nav-view>-->
</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>

//首页页面

<ion-view title="首页" class="home" ng-controller="HomeCtrl">
<header class="bar">
<h1 class="title">首页</h1>
</header>
<!--最左侧的侧拉按钮-->
<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 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

基于购物车更改 完整http请求数据 改变代码--首页与主要代码

基于购物车更改完整http请求数据改变代码--首页与主要代码