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

效果如图所示:

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

实现的主要代码如下:

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

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

图片预览的方法如下:

imgPreview(url) {

uni.previewImage({

indicator: "none",

loop: false,

urls: url,

})

},

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

相关推荐
爱前端的小菜鸡2 小时前
uniapp + vue3 + Script Setup 写法变动 (持续更新)
javascript·vue.js·uni-app
白臻4 小时前
小程序 npm 支持
前端·小程序·npm
guanpinkeji7 小时前
剧本杀小程序:助力商家发展,提高游戏体验
游戏·小程序·游戏开发·小程序开发·剧本杀·剧本杀小程序
程序编织梦想7 小时前
uniapp跨域问题解决
uni-app·跨域
来之梦7 小时前
uniapp中 uni.previewImage用法
前端·javascript·uni-app
KingDol_MIni7 小时前
Uniapp的简要开发流程指南
uni-app
An_s7 小时前
uniapp实现一个键盘功能
uni-app
避坑记录7 小时前
uni-appx,实现登录功能,弹窗功能。组件之间传值
uni-app·uni-app-x
野猪佩奇0077 小时前
uni-app使用ucharts地图,自定义Tooltip鼠标悬浮显示内容并且根据@getIndex点击事件获取点击的地区下标和地区名
前端·javascript·vue.js·uni-app·echarts·ucharts
酷爱码8 小时前
新闻电影资讯类小程序模板源码
小程序