uniapp点击预览图片，两种效果

背景：

在使用uniapp框架中，我们对图片的展示需要点击放大展示(单张)；如果是多张图片，要支持左右滑动查看多张图片(多张)。

官网链接：点击跳转官网

一、单张，点击放大

代码：

核心代码：

//图片预览，封装方法   
imgPreview(url) {
            uni.previewImage({
                urls: [url]
            })
        },

二、多张，点击放大并左右滑动 

代码：

核心代码：

//多张图片，可以左右滑动
imgPreview(url) {
            let arr = []
            this.imgsData.forEach((item, index) => {
                if (item.img) {
                    arr.push(item.img)
                }
            })
            let index = arr.findIndex(value => value == url)
            uni.previewImage({
                current: index,
                urls: arr,
            });
        }

 效果展示：

三、其它

长按图片，的效果

uni.previewImage({
                    current: index,
                    urls: arr,
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏'],
                        success: function(data) {
                            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                    }
                });