如何在Uniapp中实现图片浏览功能

1. 前言

在Uniapp中实现图片浏览功能是一个常见的需求，无论是在社交应用中还是电商应用中，都需要用户能够浏览和放大图片。本文将介绍如何在Uniapp中实现图片浏览功能。

2. 使用uni-ui组件实现图片浏览

2.1 uni-ui是什么

uni-ui是由DCloud官方团队开发的一套跨平台组件库，它是Uniapp框架下的组件库，提供了丰富、易用的基础组件及业务组件，可以帮助我们更快地搭建Uniapp应用。

2.2 uni-ui的u-pic-viewer组件

在uni-ui中，提供了一个u-pic-viewer组件，可以方便地实现图片浏览功能。使用该组件需要先引入uni-ui组件，引入方法请参考uni-ui官方文档。

// 安装uni-ui
npm install @dcloudio/uni-ui

在Vue文件的使用该组件时，需要使用import引入，然后在components中注册组件:

import uPicViewer from '@/uni-ui/u-pic-viewer/vue/u-pic-viewer.vue'
export default {
  components: {
    uPicViewer
  }
}

2.3 使用u-pic-viewer组件实现图片浏览

我们先在页面中引入u-pic-viewer组件:

<template>
  <div>
    <u-pic-viewer
      :urls="urls"
      @close="closeViewer"
      :current="currentIndex"
      :enableDirection="true"
    ></u-pic-viewer>
  </div>
</template>
<script>
import uPicViewer from '@/uni-ui/u-pic-viewer/vue/u-pic-viewer.vue'
export default {
  components: {
    uPicViewer
  },
  data() {
    return {
      // 图片地址
      urls: [
        'http://img.52z.com/upload/news/image/20180213/20180213072618_80481.jpg',
        'http://img.52z.com/upload/news/image/20180213/20180213072618_80482.jpg',
        'http://img.52z.com/upload/news/image/20180213/20180213072618_80483.jpg',
        'http://img.52z.com/upload/news/image/20180213/20180213072618_80484.jpg'
      ],
      // 当前查看的图片序号
      currentIndex: 0
    }
  },
  methods: {
    // 关闭查看器
    closeViewer() {
      this.$refs.picViewer.close()
    }
  }
}
</script>

我们可以从<u-pic-viewer>组件中了解到，需要传入图片地址数组urls、当前查看的图片序号currentIndex、是否支持滑动切换图片enableDirection等参数。在组件的回调事件中，我们可以使用ref来获取u-pic-viewer组件实例，进而调用组件的close()方法来关闭图片浏览器。

3. 使用uniGallery组件实现图片浏览

3.1 uniGallery是什么

uniGallery是一款基于uniGallery组件库开发的H5图片轮播组件，它提供了多种功能，同时也支持类似微信朋友圈的图片查看效果，并且可以支持缩放、旋转等操作。

3.2 使用uniGallery组件实现图片浏览

我们可以先通过npm来安装uniGallery组件：

// 安装uniGallery
npm install --save uni-gallery

在Vue文件使用该组件时，需要使用import引入，然后在components中注册组件:

import uniGallery from 'uni-gallery'
export default {
  components: {
    uniGallery
  }
}

我们可以在页面中使用<u-gallery>组件来实现图片浏览器:

<template>
  <div>
    <uniGallery
      :show="showGallery"
      @close="closeGallery"
      :images="images"
      :current-image="currentImage"
      :z-index="99"
    ></uniGallery>
  </div>
</template>
<script>
import uniGallery from 'uni-gallery'
export default {
  components: {
    uniGallery
  },
  data() {
    return {
      // 是否显示uniGallery组件
      showGallery: false,
      // 当前查看的图片序号
      currentImage: 0,
      // 图片列表
      images: [
        {
          src: 'http://img.52z.com/upload/news/image/20180213/20180213072618_80481.jpg'
        },
        {
          src: 'http://img.52z.com/upload/news/image/20180213/20180213072618_80482.jpg'
        },
        {
          src: 'http://img.52z.com/upload/news/image/20180213/20180213072618_80483.jpg'
        },
        {
          src: 'http://img.52z.com/upload/news/image/20180213/20180213072618_80484.jpg'
        }
      ]
    }
  },
  methods: {
    // 打开图片浏览器
    openGallery(index) {
      this.currentImage = index
      this.showGallery = true
    },
    // 关闭图片浏览器
    closeGallery() {
      this.showGallery = false
    }
  }
}
</script>

如上代码中，我们使用了uniGallery组件的@close事件来关闭图片浏览器。在components属性中，我们使用import来引入该组件，并使用在methods属性中的openGallery()方法来打开图片浏览器。

4. 总结

在Uniapp中实现图片浏览器功能，本文提供了两种方法。一种是使用官方组件库uni-ui中的u-pic-viewer组件，另一种是使用开源组件uniGallery。两种方法都是针对H5端的，如果要扩展到其他平台，可以参考相关文档进行修改。