利用ionic里的和 modal 做个仿淘宝商品详情页顶部轮播图的demo

做这个demo之前首先得了解淘宝app商品详情页顶部轮播图都有哪些构造。

1.几张图片轮播展示；

2.点击图片出现全屏图片轮播展示；

3.点击第几张图，全屏展示对应图片；

4.全屏展示的图片可以拖拽放大；

5.全屏图片可以长按保存。（这点在这个demo中不会出现，因为博主这个功能是调用的Android原生的方法。）

了解了功能之后，就可以上手开始做了，好了废话不多说，直接上代码。

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的是自带手势缩放功能，只是现在的版本不支持，但是大牛无处不在嘛，有大牛找到个方法可以取消这个限制，在你的

config里面加上：$ionicConfigProvider.scrolling.jsScrolling(true);就ok了。

好了，了解上面两个重点就差不多了。