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

最新推荐文章于 2021-09-11 18:33:05 发布

xsw73692

最新推荐文章于 2021-09-11 18:33:05 发布

阅读量354

点赞数

本文链接：https://blog.csdn.net/Rbh73692/article/details/78298917

版权

//主要代码

<!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", ["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>

xsw73692

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于购物车更改完整http请求数据改变代码--首页与主要代码

//主要代码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 hre
复制链接

扫一扫