您的位置：首页 > Web前端 > AngularJS

AngularJS的ionic（侧拉、选项卡、list展示、上拉加载、下拉刷新）

2017-10-18 20:12 323 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<script src="../lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" href="../lib/css/ionic.css">
<style>
img{
width: 100%;
height:250px;
}
</style>
<script>
var myapp=angular.module("myapp",["ionic"]);
myapp.controller("myCtrl",function ($scope,$http,$ionicSideMenuDelegate) {
$http({
url:"data.json",
method:"GET"
}).then(function (aa) {
$scope.items=aa.data;
})
/*刷新*/
$scope.doRefresh = function() {
$http.get('data,json')
.success(function(newItems) {
$scope.items = newItems.data;
})
.finally(function() {
// 停止广播ion-refresher
$scope.$broadcast('scroll.refreshComplete');
});
};
/*加载*/
$scope.loadMore = function() {
$http.get('data.json').success(function(items) {
Array.prototype.push.apply($scope.items,items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};

$scope.$on('stateChangeSuccess', function() {
$scope.loadMore();
});

/*侧拉*/
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">

<!--侧拉菜单-->
<ion-side-menus>
<!-- 中间内容 -->
<ion-side-menu-content>
<!--导航栏（选项卡）-->
<ion-tabs class="tabs-positive tabs-icon-top">

<ion-tab title="首页" icon-on="ion-home" icon-off="ion-ios-filing-outline">
<!--页眉-->
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="toggleLeft()"><span class="ion ion-chevron-left"></span></button>
</div>
<h1 class="title">淘宝</h1>
<div class="buttons">
<button class="button"><span class="ion ion-ios-keypad-outline"></span></button>
</div>
</ion-header-bar>
<ion-content>
<!--图片的轮播-->
<ion-slide-box auto-play="true" slide-interval="1000" does-continue="true">
<ion-slide>
<div class="box blue"><img src="images/a.JPG" height="260" width="195"/></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><img src="images/b.JPG" height="260" width="195"/></div>
</ion-slide>
<ion-slide on-slide-changed="slideHasChanged(index)">
<div class="box pink"><img src="images/c.JPG" height="260" width="195"/></div>
</ion-slide>
<ion-slide>
<div class="box blue"><img src="images/d.JPG" height="195" width="260"/></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><img src="images/e.JPG" height="260" width="195"/></div>
</ion-slide>
<ion-slide on-slide-changed="slideHasChanged(index)">
<div class="box pink"><img src="images/f.JPG" height="270" width="360"/></div>
</ion-slide>
</ion-slide-box>

<!--下拉刷新-->
<ion-refresher
pulling-text="下拉刷新..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items">
<p>{{item.text}}</p>
<img ng-src="{{item.pic}}">
</ion-item>
</ion-list>

<!--listv
9b06
iew的展示-->
<ion-list>
<ion-item ng-repeat="item in items">
<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="购物车" icon-on="ion-ios-cart-outline" icon-off="ion-ios-cart">
<!-- 标签 2 内容 -->
</ion-tab>

<ion-tab title="设置" icon-on="ion-android-settings" icon-off="ion-ios-gear-outline">
<!-- 标签 3 内容 -->
</ion-tab>

</ion-tabs>
</ion-side-menu-content>

<!-- 左侧菜单 -->
<ion-side-menu side="left" width="220">
<ion-list>
<ion-item ><img src="images/f.JPG" style="width: 30px;height: 30px"/><span>随缘</span></ion-item>
<ion-item ><span class="ion ion-cube"></span>      <span>我的收藏</span>      <span class="ion ion-ios-arrow-right"></span></ion-item>
<ion-item ><span class="ion ion-university"></span>      <span>我的钱包</span>      <span class="ion ion-ios-arrow-right"></span></ion-item>
<ion-item><span class="ion ion-settings"></span>      <span>我的设置</span>      <span class="ion ion-ios-arrow-right"></span></ion-item>
<ion-item><span class="ion ion-tshirt"></span>      <span>个性装扮</span>      <span class="ion ion-ios-arrow-right"></span></ion-item>
</ion-list>
</ion-side-menu>

</ion-side-menus>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航