做这个demo之前首先得了解淘宝app商品详情页顶部轮播图都有哪些构造。
1.几张图片轮播展示;
2.点击图片出现全屏图片轮播展示;
3.点击第几张图,全屏展示对应图片;
4.全屏展示的图片可以拖拽放大;
5.全屏图片可以长按保存。(这点在这个demo中不会出现,因为博主这个功能是调用的Android原生的方法。)
了解了功能之后,就可以上手开始做了,好了废话不多说,直接上代码。
html代码:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<script type="text/javascript" src="js/demo1.js"></script>
<style>
.top_slide_img {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.scale-in {
transform: scale(0.9);
opacity: 0;
}
.scale-in.ng-enter,
.scale-in> .ng-enter {
transition: all cubic-bezier(.1, .7, .1, 1) 400ms;
}
.scale-in.ng-enter-active,
.scale-in> .ng-enter-active {
transform: scale(1);
opacity: 1;
}
.scale-in.ng-leave,
.scale-in> .ng-leave {
transition: all ease-in-out 250ms;
}
.scroll-xy .scroll {
width: 100%;
height: 100%;
}
</style>
</head>
<body ng-controller="main_control">
<ion-nav-view></ion-nav-view>
<script id="demo.html" type="text/ng-template">
<ion-view>
<ion-content>
<ion-slide-box auto-play='true' does-continue="true" slide-interval=2000>
<ion-slide ng-repeat="img in img_data" style="height: 250px; background-color: black;">
<div class="top_slide_img" style="background-image: url({{img.img_url}});" ng-click="open_modal($index)"></div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
</script>
<script id="top_slide_modal.html" type="text/ng-template">
<ion-modal-view style="height: {{win_H}}px;bottom: 0;position: fixed;" class="scale-in">
<ion-slide-box delegate-handle="modal_slide" style="height: {{win_H}}px;z-index: 10; background-color: black;">
<ion-slide ng-repeat="img in img_data" ng-click="close_modal()">
<ion-scroll overflow-scroll='false' zooming="true" direction="xy" min-zoom="1" max-zoom="4" style="height: {{win_H}}px;width:{{win_W}}px;">
<div class="top_slide_img" style="background-image: url({{img.img_url}});"></div>
</ion-scroll>
</ion-slide>
</ion-slide-box>
</ion-modal-view>
</script>
</body>
</html>
js代码:
angular.module('myapp', ['ionic'])
.run(function ($rootScope) {
$rootScope.win_W = window.innerWidth;
$rootScope.win_H=window.innerHeight;
})
.config(function($stateProvider, $ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(true);
$stateProvider
.state("demo", {
templateUrl: "demo.html"
})
})
.controller('main_control', function($scope, $ionicSlideBoxDelegate, $ionicModal,$state) {
$state.go('demo');
$scope.img_data = [{
img_url: 'img/photo1.jpg'
}, {
img_url: 'img/photo2.jpg'
}, {
img_url: 'img/photo3.jpg'
}]
$ionicModal.fromTemplateUrl('top_slide_modal.html',{
scope:$scope,
}).then(function(modal){
$scope.top_slide_modal=modal;
});
$scope.open_modal=function(index){
$scope.top_slide_modal.show();
$ionicSlideBoxDelegate.$getByHandle('modal_slide').slide(index);
}
$scope.close_modal=function(){
$scope.top_slide_modal.hide();
}
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
这个demo中用的一些方法,官方文档中都有,说下重点:
demo中用了delegate-handle这是给你的slide-box命名的,它的性质就跟id,class差不多,js中运用$getByHandle(' ')来获取指定的slide-box,我们在打开modal时传一个参数
$index,这个参数指的是点击当前图片的索引,js中运用slide-box的slide()方法让slide-box跳到指定图片。
另一个重点就是图片的手势放大,其实ionic的<ion-scroll>是自带手势缩放功能,只是现在的版本不支持,但是大牛无处不在嘛,有大牛找到个方法可以取消这个限制,在你的
config里面加上:$ionicConfigProvider.scrolling.jsScrolling(true);就ok了。
好了,了解上面两个重点就差不多了。