当前位置: 首页 > 工具软件 > Side bar demo > 使用案例 >

demo1

钱弘壮
2023-12-01

//主页面

<!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) {
          $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="120px" height="120px" style="border-radius:50%; " >
                <h4>和琪</h4>
            </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">

        <!-- 标签 1 内容 -->
    </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>
        <!-- 标签 2 内容 -->
    </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>
        <!-- 标签 3 内容 -->
    </ion-tab>
</ion-tabs>
</body>

</html>

分页面 home
<ion-view title="首页" class="home">

    <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 >
            <div class="picture">
                <img ng-src="img/book_01.jpg" width="128px" height="128px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>
                <h3>C++、Java中的圣经级著作</h3>
                <div>
                    <span>{{86.40|currency:"¥"}}</span>
                    <i class="icon ion-ios-cart"></i>
                </div>
            </div>
        </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"¥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"¥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"¥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"¥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"¥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

        </ion-list>
    </ion-content>
</ion-view>

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

//mine
<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="120px" height="120px" style="border-radius:50%; " >
            <h4>和琪</h4>
        </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>

//样式
.home .picture {
    float: left;
}
.home .details h3 {
    margin-top: 26px;
}
.home .details div {
    margin-top: 48px;
}
.home .details span {
    color: red;
    font-size: large;
}
.home .details .ion-ios-cart {
    position: absolute;
    right: 20px;
}
.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: 20px;
}
.cart .item {
    border-width: 0;
}
.cart hr {
    border: 1px dotted #999;
    margin-left: 12px;
    margin-right: 12px;
}
.mine .avatar {
    width: 100%;
    height: 280px;
    background: url("../img/mine_bg.jpg") no-repeat;
    background-size: cover;
    text-align: center;
}
.mine .avatar img {
    border-radius: 50%;
    margin-top: 30px;
}





 类似资料:

相关阅读

相关文章

相关问答