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

效果如图所示:

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

实现的主要代码如下:

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

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

图片预览的方法如下:

imgPreview(url) {

uni.previewImage({

indicator: "none",

loop: false,

urls: url,

})

},

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

相关推荐
Rooting++3 小时前
小程序{{ }}和vue{{ }}语法的区别
前端·vue.js·小程序
博、、7 小时前
折扣卡CPS系统源码实战开发指南:从架构设计到落地部署全解析
小程序·需求分析
bug总结7 小时前
uniapp的easycom自动组件注册机制
uni-app
HF_code9 小时前
uniapp-history路由深度指南
uni-app
lhldsg10 小时前
折扣卡CPS小程序定制全流程实战指南:从需求分析到上线部署
java·前端·小程序
suliqiang10 小时前
【前端技术】 Web 前端技术36年 演进全景图
信息可视化·微信小程序·小程序·前端框架·uni-app·人机交互·xcode
weixin_493503671 天前
商会小程序附件上传:分片上传 + OSS 直传完整实现(Vue3 + 阿里云 OSS 实战)
阿里云·小程序·云计算
优度网1 天前
微信小程序主体变更公证书线上办理流程与业务交接风险规避方法浅析(2026)
小程序
m0_587383001 天前
外卖CPS系统开发实战:从架构设计到运营落地全指南
java·spring·小程序·架构·需求分析
梦曦i1 天前
uni-router v0.2.0重磅发布:全链路拦截+重复导航优化
前端·uni-app