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

效果如图所示:

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

实现的主要代码如下:

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

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

图片预览的方法如下:

imgPreview(url) {

uni.previewImage({

indicator: "none",

loop: false,

urls: url,

})

},

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

相关推荐
阿凤217 小时前
uniapp运行到app端怎么打开文件
android·前端·javascript·uni-app
00后程序员张8 小时前
完整教程:如何将iOS应用程序提交到App Store审核和上架
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张8 小时前
iOS应用性能优化全解析:卡顿、耗电、启动与瘦身
android·ios·性能优化·小程序·uni-app·iphone·webview
大力水手~11 小时前
小程序模仿iphone苹果手机滑动选时间
智能手机·小程序
杰建云16711 小时前
小程序如何做裂变?
小程序·小程序制作
Front思12 小时前
解决 uniapp Dart Sass 2.0.0 弃用警告
前端·uni-app·sass
阳光雨滴12 小时前
微信小程序使用canvas自定义富文本内容做图片分享
微信小程序·小程序
杰建云16712 小时前
小程序如何做活动?
小程序·小程序制作
这是个栗子12 小时前
【微信小程序问题解决】微信小程序全局 navigationBarTitleText 不起作用
微信小程序·小程序·导航栏
lpfasd12313 小时前
从“惯性思维”到“规则驱动”:一次微信小程序修复引发的 AI 编程范式思考
人工智能·微信小程序·小程序