uniapp预览图片详解

uni.previewImage({ urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'], current: 0 });

其中，urls参数为一个字符串数组，表示需要预览的图片数组；current参数为一个数字，表示当前选中的图片在数组中的索引值，从0开始计数。

在调用uni.previewImage()方法后，uniapp会显示系统自带的图片预览界面，用户可以滑动查看多张图片，也可以缩放图片进行查看。

uni.previewImage({ urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'], current: 0, customButtons: [{ icon: 'https://example.com/share.png', text: '分享', onTap: function() { // 分享图片 } }, { icon: 'https://example.com/save.png', text: '保存到相册', onTap: function() { // 保存图片到相册 } }] });

其中，customButtons参数为一个对象数组，表示自定义按钮的配置，每个对象包含3个属性：

uni.previewImage({ urls: ['https://example.com/image1_original.jpg', 'https://example.com/image2_original.jpg'], current: 0 });

通过将urls参数中的缩略图路径替换成原图路径，就可以实现查看原图的功能。

// 动态生成预览组件 let preview = uni.createPreviewImage({ // 图片地址数组 urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'], // 当前显示图片的索引值 current: 0, // 预览组件显示成功的回调函数 success () { console.log('预览组件显示成功'); }, // 关闭预览组件的回调函数 fail () { console.log('预览组件关闭'); } }); // 更新图片地址数组 preview.update({ urls: ['https://example.com/image3.jpg', 'https://example.com/image4.jpg'] }); // 更新当前显示图片的索引值 preview.update({ current: 1 }); // 关闭预览组件 preview.close();

通过调用uni.createPreviewImage()方法动态生成预览组件，可以动态生成多个预览组件，并对预览组件进行各种操作，例如更新图片地址数组、更新当前显示图片的索引值、关闭预览组件等。

{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/preview-image/preview-image", "style": { "navigationBarTitleText": "预览图片" }, "usingComponents": { "uni-preview-image": "@dcloudio/uni-ui/lib/uni-preview-image/uni-preview-image" } } ], "easycom": { "autoscan": true, "custom": { "uni-preview-image": "@dcloudio/uni-ui/lib/uni-preview-image/uni-preview-image" } }, "plugins": { "uni-saving-image-plugin": { "version": "1.0.0", "provider": "uni-silence" } } }

在plugins节点中添加uni-saving-image-plugin插件的配置信息，其中version参数表示插件的版本号，provider参数表示插件的提供者。