uniapp中如何实现图片画廊效果

1. 前言

在很多app中，我们常常能看到图片画廊（image gallery）效果的应用，比如浏览相册、商品图片浏览等。那么，在uniapp中，如何实现图片画廊效果呢？本篇文章将为大家介绍一种简单实现方式。

2. 准备工作

2.1 引入组件库

在uniapp中，我们可以使用第三方组件库，大大提高项目开发效率。这里我们引入一个图片画廊组件库，可以让我们快速实现画廊效果。

npm install uni-gallery --save

然后在页面中引入组件：

<template>
  <view>
    <uni-gallery :list="imgList" :showIndex="true"></uni-gallery>
  </view>
</template>
<script>
  import UniGallery from 'uni-gallery'
  export default {
    components: {
      UniGallery
    },
    data() {
      return {
        imgList: [ // 要展示的图片列表
          { url: 'https://example.com/img/1.jpg' },
          { url: 'https://example.com/img/2.jpg' },
          { url: 'https://example.com/img/3.jpg' },
          // ...
        ]
      }
    }
  }
</script>

这样就可以在页面上展示图片画廊了。但是这还没有完成我们想要的效果，下面我们来补充实现。

2.2 完善组件库样式

这个组件库的样式不太好看，我们需要自己进行优化。可以在index.vue中加入以下代码：

<style lang="scss">
  .uni-gallery {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    width: 100%;
    height: 100%;
    .swiper-container {
      height: 100%;
      .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          height: 100%;
          max-width: 100%;
        }
      }
      .swiper-pagination {
        position: absolute;
        bottom: 20px;
        width: 100%;
        left: 0;
        bottom: 20rpx;
        .swiper-pagination-bullet {
          width: 20rpx;
          height: 10rpx;
          border-radius: 10rpx;
          background-color: rgba(255, 255, 255, 0.5);
          &.swiper-pagination-bullet-active {
            background-color: #ffffff;
          }
        }
      }
      .swiper-button-next {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 12rpx;
          height: 20rpx;
        }
      }
      .swiper-button-prev {
        position: absolute;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 12rpx;
          height: 20rpx;
        }
      }
    }
  }
</style>

这样我们就能更加美观地展示出页面了。

3. 实现分页效果

在展示图片时，我们往往需要进行分页操作。这个组件库支持分页操作，我们可以通过监听其change事件来实现分页效果。修改我们引入的组件，这样我们就能支持分页操作了。

<template>
  <view>
    <uni-gallery :list="imgList" :showIndex="true" @change="handleChange"></uni-gallery>
  </view>
</template>
<script>
  import UniGallery from 'uni-gallery'
  export default {
    components: {
      UniGallery
    },
    data() {
      return {
        imgList: [ // 要展示的图片列表
          { url: 'https://example.com/img/1.jpg' },
          { url: 'https://example.com/img/2.jpg' },
          { url: 'https://example.com/img/3.jpg' },
          // ...
        ],
        currentIndex: 0 // 当前图片的索引
      }
    },
    methods: {
      handleChange(index) { // 监听change事件
        this.currentIndex = index
      }
    }
  }
</script>

4. 完成

至此，我们已经完成了图片画廊的实现。相信通过本文的介绍，你已经掌握了实现图片画廊功能的方法。