### 一、预览图片的基本用法 在uniapp中，我们可以使用`uni.previewImage()`API对图片进行预览，具体使用方法如下： ``` uni.previewImage({ urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'], current: 0 }); ``` 其中，`urls`参数为一个字符串数组，表示需要预览的图片数组；`current`参数为一个数字，表示当前选中的图片在数组中的索引值，从0开始计数。 在调用`uni.previewImage()`方法后，uniapp会显示系统自带的图片预览界面，用户可以滑动查看多张图片，也可以缩放图片进行查看。 ### 二、自定义预览组件 如果预览图片需要一些自定义的功能，例如添加分享按钮或者保存图片按钮，我们可以使用`uni.previewImage()`方法的`customButtons`参数来自定义按钮。具体代码如下： ``` 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个属性： - `icon`：按钮的图标，可以是本地图片路径或者网络图片路径。 - `text`：按钮的文本。 - `onTap`：按钮的点击事件回调函数。 ### 三、查看原图 在预览图片时，部分用户可能需要查看原图，而默认情况下uniapp并不会加载原图，而是按照屏幕尺寸进行裁剪和缩放。如果需要查看原图，需要对`uni.previewImage()`方法的`urls`参数进行修改，将缩略图路径替换成原图路径。具体代码如下： ``` uni.previewImage({ urls: ['https://example.com/image1_original.jpg', 'https://example.com/image2_original.jpg'], current: 0 }); ``` 通过将`urls`参数中的缩略图路径替换成原图路径，就可以实现查看原图的功能。 ### 四、动态预览图片 在某些情况下，我们需要动态生成并预览多张图片，例如根据用户输入的关键字搜索相关图片后，需要展示搜索结果中的图片。此时，可以使用`wx.previewImage()`方法动态生成预览组件。具体代码如下： ``` // 动态生成预览组件 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()`方法动态生成预览组件，可以动态生成多个预览组件，并对预览组件进行各种操作，例如更新图片地址数组、更新当前显示图片的索引值、关闭预览组件等。 ### 五、支持长按保存图片 在默认情况下，uniapp的图片预览组件不支持长按保存图片功能。如果需要支持长按保存图片功能，需要借助插件`uni-saving-image-plugin`来实现。具体使用方法如下： - 安装插件：使用HBuilderX，找到项目根目录，右键选择“插件”→“插件管理器”，搜索插件`uni-saving-image-plugin`并安装。 - 在`pages.json`文件中添加配置信息： ``` { "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`参数表示插件的提供者。 - 在`preview-image.vue`文件中添加代码： ``` <script> export default { data () { return { currentIndex: 0, images: [ 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg' ] }; } } </script> ``` 在`uni-preview-image`组件中添加`show-save-button`属性，并将其设置为`true`，表示显示保存按钮。当用户长按图片时，预览组件会显示保存按钮，用户点击保存按钮即可保存当前图片到相册中。 原文：https://www.python100.com/html/92736.html