一、说明
功能:点击图片预览大图,并且可以通过滑动查看不同图片的预览大图。
点击预览大图后:
二、上代码
参考uniapp官方文档 其提供了预览大图的函数uni.previewImage(OBJECT)
.
//放大查看推荐图片
enlargePicture(index) {
console.log("放大查看图片")
const imgUrl = this.imgList; //图片列表,this.imgList是一个图片链接的数组。
// this.enlargedImage = imgUrl;
uni.previewImage({
loop: true,
urls: imgUrl, //可以展示imgUrl 列表中所有的图片
current: index //首先当前index对应图片,左右可以切换其他序号的图片
});
},
以下是各个参数的含义:
current
: 类型是String/Number
为当前显示图片的链接/索引值,不填或填写的值无效则为 urls 的第一张。建议填写。
urls
: 类型是Array<String>
,必填项,是需要预览的图片链接列表。该列表中有多少个元素就可以预览多少的对应图片。
indicator
: 类型是 String
,非必填项,是图片指示器样式,可取值:“default” - 底部圆点指示器; “number” - 顶部数字指示器; “none” - 不显示指示器。 App
loop
: 类型是 Boolean
,非必填项,指是否可循环预览,默认值为 false 。
longPressActions
: 类型是Object
,非必填项,是长按图片显示的操作菜单,如不填默认为保存相册。
success
: 类型是 Function
,非必填项,是接口调用成功的回调函数。
fail
: 类型是 Function
,非必填项,是接口调用失败的回调函数 。
complete
: 类型是 Function
,非必填项,是接口调用结束的回调函数(调用成功、失败都会执行)。