购物车）

来源：互联网发布：世界征服者3 全将数据编辑：程序博客网时间：2024/06/05 09:25
效果：
首页面的效果
购物车的效果：
我的效果：
侧拉的效果：
代码：
<!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>
阅读全文
0 0