<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Title</title> <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet"> <style> img{ width: 100%; height: auto; } .slider-pager .slider-pager-page{ color: #fff; } .item-icon-right .icon{ font-size: 14px; } .item, .item h1, .item h2, .item h3, .item h4, .item h5, .item h6, .item p, .item-content, .item-content h1, .item-content h2, .item-content h3, .item-content h4, .item-content h5, .item-content h6, .item-content p{ white-space: normal;} </style> <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script> <script> var myapp=angular.module("myapp",["ionic"]); myapp.controller("myCtrl",function($scope,$ionicSideMenuDelegate){ $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }); myapp.controller("Ctrl",function($scope,$http){ $http({ url:"data.json", method:"GET" }).then(function(data){ $scope.data=data.data; }); $scope.loadMore = function() { $http.get('data.json').success(function(items) { //useItems(items); Array.prototype.push.apply($scope.data,items); $scope.$broadcast('scroll.infiniteScrollComplete'); }); }; $scope.$on('stateChangeSuccess', function() { $scope.loadMore(); }); }) </script> </head> <body ng-app="myapp"> <ion-side-menus> <!-- 中间内容 --> <ion-side-menu-content ng-controller="myCtrl"> <ion-tabs class="tabs-positive tabs-icon-top"> <ion-tab title="首页1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> <!-- 标签 1 内容 --> <!--头部--> <ion-header-bar align-title="center" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="toggleLeft()">左侧按钮</button> </div> <h1 class="title">Title!</h1> <div class="buttons"> <button class="button">右侧按钮</button> </div> </ion-header-bar> <ion-content ng-controller="Ctrl"> <ion-slide-box auto-play="true" slide-interval="2000" does-continue="true"> <ion-slide> <div class="box blue"><img src="img/community_02.jpg"></div> </ion-slide> <ion-slide> <div class="box yellow"><img src="img/community_04.jpg"></div> </ion-slide> <ion-slide on-slide-changed="slideHasChanged(index)"> <div class="box pink"><img src="img/community_06.jpg"></div> </ion-slide> </ion-slide-box> <ion-list> <ion-item ng-repeat="item in data"> <p>{{item.text}}</p> <img ng-src="{{item.pic}}"> </ion-item> </ion-list> <ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll> </ion-content> </ion-tab> <ion-tab title="关于1" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> <!-- 标签 2 内容 --> <p>这个是第2个</p> </ion-tab> <ion-tab title="设置1" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> <!-- 标签 3 内容 --> <p>这个是第3个</p> </ion-tab> </ion-tabs> </ion-side-menu-content> <!-- 左侧菜单 --> <ion-side-menu side="left" width="150"> <ion-list> <ion-item class="item-icon-right">我的资料<i class="icon ion-chevron-right" menu-toggle></i></ion-item> <ion-item><img src="img/pic_01.jpg"></ion-item> <ion-item class="item-icon-right">我的收藏<i class="icon ion-chevron-right"></i></ion-item> <ion-item class="item-icon-right">我的设置<i class="icon ion-chevron-right"></i></ion-item> <ion-item class="item-icon-right">我的购物车<i class="icon ion-chevron-right"></i></ion-item> <ion-item class="item-icon-right">我的钱包<i class="icon ion-chevron-right"></i></ion-item> </ion-list> </ion-side-menu> </ion-side-menus> </body> </html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
