利用ionic里的<ion-slide-box>和 modal 做个仿淘宝商品详情页顶部轮播图的demo

最新推荐文章于 2020-10-14 21:42:23 发布

zhangyoude123

最新推荐文章于 2020-10-14 21:42:23 发布

阅读量3.6k

点赞数

文章标签： angularjs ionic

本文链接：https://blog.csdn.net/zhangyoude123/article/details/52083000

版权

做这个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了。

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

zhangyoude123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用ionic里的<ion-slide-box>和 modal 做个仿淘宝商品详情页顶部轮播图的demo

做这个demo之前首先得了解淘宝app商品详情页顶部轮播图都有哪些构造。1.几张图片轮播展示；2.点击图片出现全屏图片轮播展示；3.点击第几张图，全屏展示对应图片；4.全屏展示的图片可以拖拽放大；5.全屏图片可以长按保存。（这点在这个demo中不会出现，因为博主这个功能是调用的Android原生的方法。）了解了功能之后，就可以上手开始做了，好了废话不多说，直接上代码。h
复制链接

扫一扫