uni-app 小程序:显示图片并且点击图片展示大图

效果如图所示:

在页面显示一张图片,然后点击该张图片后显示大图。点击大图就可以关闭大图。

实现的主要代码如下:

<image :src="imgpath" mode="aspectFill" @click="imgPreview(imgArr)"></image>

其中imgpath为图片路径,imgArr为图片路径组成的数组。

图片预览的方法如下:

imgPreview(url) {
     uni.previewImage({
                    indicator: "none",
                    loop: false,
                    urls: url,
      })
},

以上方法就是小程序实现点击小图查看大图的方法了。

相关推荐

  1. uni-app预览图片

    2024-06-15 06:40:01       43 阅读
  2. uniapp微信程序保存图片

    2024-06-15 06:40:01       45 阅读
  3. 程序展示富文本 图片不适配?视频不显示

    2024-06-15 06:40:01       11 阅读
  4. Uniapp 图片放大

    2024-06-15 06:40:01       16 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-15 06:40:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-15 06:40:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-15 06:40:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-15 06:40:01       18 阅读

热门阅读

  1. 【代码】3d->video

    2024-06-15 06:40:01       8 阅读
  2. 前端常用排序算法

    2024-06-15 06:40:01       6 阅读
  3. 鸿蒙Arkts上传图片并获取接口返回信息

    2024-06-15 06:40:01       9 阅读
  4. .NETCORE 微软企业登录

    2024-06-15 06:40:01       7 阅读
  5. bash和sh区别

    2024-06-15 06:40:01       6 阅读
  6. 从零手写实现 nginx-23-directive IF 条件判断指令

    2024-06-15 06:40:01       7 阅读
  7. svm 超参数

    2024-06-15 06:40:01       6 阅读
  8. shell判断语句练习

    2024-06-15 06:40:01       6 阅读
  9. MySQL周内训参照2、DDL与DML语句

    2024-06-15 06:40:01       9 阅读
  10. Scala学习笔记12: 高阶函数

    2024-06-15 06:40:01       6 阅读
  11. 详解 Flink CDC 的介绍和入门案例

    2024-06-15 06:40:01       4 阅读
  12. Nginx之Stream(TCP/UDP)负载均衡

    2024-06-15 06:40:01       7 阅读