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

效果如图所示:

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

实现的主要代码如下:

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

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

图片预览的方法如下:

imgPreview(url) {

uni.previewImage({

indicator: "none",

loop: false,

urls: url,

})

},

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

相关推荐
智慧景区与市集主理人38 分钟前
巨有科技市集小程序精准匹配摊主与业态,解锁市集增收新可能
科技·小程序
kyh100338112039 分钟前
微信小程序 聚合摇骰喝酒工具 完整实现(含源码)
微信小程序·小程序·摇骰子小游戏
博客zhu虎康1 小时前
小程序按钮实现先表单校验再走手机号获取功能
android·javascript·小程序
万象资讯2 小时前
2026实测|订货小程序哪个平台支持快速部署?
小程序
码云社区2 小时前
JAVA同城上门做饭系统家政上门同城服务系统源码小程序+APP+公众号+h5
java·开发语言·小程序
陈龙龙的陈龙龙2 小时前
uni-app中获取参数的几个方法
uni-app
果壳~2 小时前
【Uniapp】【rich-text】富文本展示以及图片预览功能解决方案
前端·javascript·uni-app
杰建云1672 小时前
小程序从零搭建全流程实战指南
开发语言·小程序·php
码农客栈2 小时前
小程序学习(十八)之“下拉刷新”
小程序
雯0609~3 小时前
微信小程序的原生开发项目如何转至uni-app
微信小程序·小程序·uni-app