Ionic 简易侧拉框

来源：互联网发布：淘宝里的视频怎么转发编辑：程序博客网时间：2024/06/08 12:32

下面代码是用Ionic写的一个简易的侧拉框，希望可以帮助到大家！

<!DOCTYPE html><html  ng-app="myApp"><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title></title>    <link href="ionic/css/ionic.css" rel="stylesheet">    <link href="css/main.css" rel="stylesheet"/>    <script type="text/javascript" src="ionic/js/ionic.bundle.min.js"></script>    <script type="text/javascript">        var app = angular.module("myApp",["ionic"]);        app.config(function($stateProvider,$urlRouterProvider) {            $stateProvider.state("home",{                url:"/home",                views:{                    "views-home":{                        templateUrl:"views/home/home.html"                    }                }            }).state("cart",{                url:"/cart",                views:{                    "views-cart":{                        templateUrl:"views/cart/cart.html"                    }                }            }).state("person",{                url:"/person",                views:{                    "views-person":{                        templateUrl:"views/mine/mine.html"                    }                }            })            $urlRouterProvider.otherwise("home");        });        app.controller("myCtrl",function($scope,$ionicSideMenuDelegate,$http) {            $scope.book_list = [];            $scope.toggleLeft = function() {               $ionicSideMenuDelegate.toggleLeft();            };            var urls = [                    "",                    "book_list_1.json",                    "book_list_2.json",                    "book_list_3.json",            ];               var pageNo = 1;            var loadDate = function() {                var httpReq = $http.get(urls[pageNo]);                httpReq.success(function(data,status){                    $scope.book_list = $scope.book_list.concat(data);                }).error(function(data,status){                    console.log(status);                }).finally(function(){                    $scope.$broadcast('scroll.infiniteScrollComplete');                });            };            loadDate();            $scope.doRefresh = function() {               $scope.book_list = [];                pageNo = 1;                loadDate();            };            $scope.loadMore = function() {                if(pageNo++ > 3) {                    pageNo = 3;                    return;                }                loadDate();            };        });    </script></head><body ng-controller="myCtrl">  <ion-tabs class="tabs-stable tabs-icon-top tabs-striped">      <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">                 <ion-side-menus>                     <ion-side-menu-content>                         <ion-header-bar class="bar bar-positive">                             <button class="button button-icon ion-ios-settings-strong" ng-click="toggleLeft()"></button>                             <h1 class="title">首页</h1>                         </ion-header-bar>                         <ion-nav-view name="views-home"></ion-nav-view>                    </ion-side-menu-content>                     <ion-side-menu side="left">                             <ion-header-bar class="bar bar-positive">                                 <button class="button button-icon ion-ios-undo-outline" ng-click="toggleLeft()"></button>                                 <h1 class="title">个人中心</h1>                             </ion-header-bar>                             <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-side-menu>      </ion-side-menus>      </ion-tab>              <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">                  <ion-nav-view name="views-cart"></ion-nav-view>              </ion-tab>                  <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="person">                      <ion-nav-view name="views-person"></ion-nav-view>                  </ion-tab>  </ion-tabs><script id="home.html" type="text/ng-template">   <ion-nav-view></ion-nav-view></script>  <script id="cart.html" type="text/ng-template">      <ion-nav-view></ion-nav-view>  </script>  <script id="person.html" type="text/ng-template">      <ion-nav-view></ion-nav-view>  </script></body></html>

开始内联中的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;}

下面是home.html的布局代码

<ion-view class="home">    <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>

下面是cart.html的布局代码

<ion-view class="cart">    <ion-header-bar class="bar bar-positive">        <h1 class="title">购物车</h1>        <button class="button button-icon ion-ios-undo-outline"></button>    </ion-header-bar>    <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="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.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>

阅读全文

0 0