本文介绍了一个使用Angular和Ionic实现的侧滑菜单应用程序，包括自动播放轮播图、无限滚动加载等功能。通过示例代码展示了如何组织HTML结构、绑定控制器及调用HTTP请求获取数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /> <title>侧滑</title> <script src="../angular-1.5.5/angular.min.js"></script> <link rel="stylesheet" href="../lib/css/ionic.min.css"> <style> img{ width: 100%; height: auto; } </style> <script src="../lib/js/ionic.bundle.min.js"></script> <script> var app = angular.module("myapp",["ionic"]); app.controller("ContentController",function($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }) app.controller("mycont",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) { 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="ContentController"> <ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline"> <!-- 标签 1 内容 --> <ion-header-bar align-title="center" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="doSomething()">左侧按钮</button> </div> <h1 class="title">Title!</h1> <div class="buttons"> <button class="button">右侧按钮</button> </div> </ion-header-bar> <ion-content ng-controller="mycont"> <ion-slide-box auto-play="true" slide-interval="1000" 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-side-menus> <!-- 中间内容 --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> <!-- 左侧菜单 --> <ion-side-menu side="left"> </ion-side-menu> </ion-side-menus> <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline"> <!-- 标签 2 内容 --> <p>这个是第2个</p> </ion-tab> <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline"> <!-- 标签 3 内容 --> <p>这个是第3个</p> </ion-tab> </ion-tabs> </ion-side-menu-content> <!-- 左侧菜单 --> <ion-side-menu side="left"> <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>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
