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

效果如图所示:

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

实现的主要代码如下:

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

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

图片预览的方法如下:

imgPreview(url) {

uni.previewImage({

indicator: "none",

loop: false,

urls: url,

})

},

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

相关推荐
_pengliang15 分钟前
uni-app 实现sse流式音频技术方案
uni-app·音视频
棋宣22 分钟前
微信小程序onShareAppMessage 分享-生命周期函数 在vue3中 组合式函数 hooks中不生效
微信小程序·小程序
2601_9579665334 分钟前
抽卡机盲盒小程序怎么做?完整功能搭建与开发要点
小程序
wuyoula21 小时前
全新多平台电商代付商城源码
开发语言·c++·ui·小程序·php源码
低代码布道师21 小时前
微搭低代码MBA 培训管理系统实战 36——小程序端课程预约功能实现
低代码·小程序
万岳科技系统开发21 小时前
小程序直播架构调整指南:H5嵌套模式的优化与替代方案
小程序·架构
MY_TEUCK1 天前
【AI 应用】前端接口联调工程化:把 Swagger 接入沉淀成可复用 Skill
前端·人工智能·uni-app·状态模式
Greg_Zhong1 天前
学习AI 工程师第 3 天:小程序中调用豆包模型,实现ai助手(打字机效果与流式输出)
小程序·ai工程师·小程序调用豆包实现ai助手
于先生吖1 天前
家政派单小程序定制厂家
大数据·小程序
上架ipa1 天前
uniapp打包ios配置、申请证书、测试和上架综合教程
uni-app