利用ionic裡的和 modal 做個仿淘寶商品詳情頁頂部輪播圖的demo
阿新 • • 發佈：2019-01-30
做這個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了。
好了，瞭解上面兩個重點就差不多了。