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

效果如图所示:

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

实现的主要代码如下:

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

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

图片预览的方法如下:

imgPreview(url) {

uni.previewImage({

indicator: "none",

loop: false,

urls: url,

})

},

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

相关推荐
说私域16 分钟前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的“互相拆台”式宣传策略研究
人工智能·小程序·开源·零售
少恭写代码3 小时前
在Taro中开发一个跨端Svg组件,同时支持小程序、H5、React Native
react native·小程序·taro
少恭写代码7 小时前
duxapp 2025-01-13 更新 支持小程序配置文件
小程序
于慨7 小时前
uniapp+vite+cli模板引入tailwindcss
前端·uni-app
CN自由之翼7 小时前
【微信小程序】webp资源上传失败
微信小程序·小程序
说私域9 小时前
场景新零售:基于开源AI大模型AI智能名片S2B2C商城小程序源码的商业本质回归与创新
人工智能·小程序·开源·零售
小新11011 小时前
微信小程序学习之搜索框
学习·微信小程序·小程序
小新11011 小时前
微信小程序之将轮播图设计为组件
微信小程序·小程序
lqj_本人11 小时前
鸿蒙OS&UniApp 制作简洁高效的标签云组件#三方框架 #Uniapp
uni-app
不爱吃饭爱吃菜11 小时前
uniapp微信小程序-长按按钮百度语音识别回显文字
前端·javascript·vue.js·百度·微信小程序·uni-app·语音识别