<!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>
本文介绍了一个使用Angular和Ionic实现的侧滑菜单应用程序，包括自动播放轮播图、无限滚动加载等功能。通过示例代码展示了如何组织HTML结构、绑定控制器及调用HTTP请求获取数据。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
