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

最新推荐文章于 2024-08-21 23:57:05 发布

xiaojun_zxj

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量5.7k

点赞数 2

分类专栏： ionic 文章标签： ionic angularjs 点击显示大图

本文链接：https://blog.csdn.net/xiaojun_zxj/article/details/48023041

版权

本文介绍了如何在Ionic应用中结合AngularJS实现点击小图片查看大图的功能。通过为每个小图片添加点击事件，并设置一个用于显示大图的div，实现了从页面上的小图切换到全屏显示大图的效果。

摘要由CSDN通过智能技术生成

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

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

HTML：

<div class="row padding">
    <div class="col"
         style="width: 100px;height: 100px;padding:3px;-webkit-box-shadow: 0 0 10px rgb(153,134,117);-moz-box-shadow:0 0 10px rgb(153,134,117);box-shadow:0 0 10px rgb(153,134,117);border-radius: 3px;margin: -1px 0 0 -1px;text-align: center">
        <img class="img-responsive" style="hei