ionic中点击图片看大图的实现

在页面上显示了几张图片后，因为是手机端，图片会有点小的感觉，就想着怎么样才能让用户点击小图片看到大图呢，项目中ionic结合angularjs实现了这个功能

1.首先是三张小图上应添加一个函数，当点击图片时触发大图，代码如下：

HTML：

　　

js:

//点击图片放大
$scope.shouBigImage = function (imageName) {  //传递一个参数（图片的URl）
    $scope.Url = imageName;                   //$scope定义一个变量Url，这里会在大图出现后再次点击隐藏大图使用
    $scope.bigImage = true;                   //显示大图
};

　　

2.定义一个div，用来显示大图的代码如下：

HTML：

在这里我用的是ng-if，而没有用ng-show,ng-hide,因为它们会先闪现一下再隐藏，背景颜色使用rgba非常方便，可以调节透明度

js:

$scope.bigImage = false;    //初始默认大图是隐藏的
$scope.hideBigImage = function () {
    $scope.bigImage = false;
};

　　

3.效果图如下：

小图：

大图：

 

 

转载于:https://www.cnblogs.com/xiaojun-zxj/p/4762409.html