鸿蒙OSUniApp 开发的多图浏览器组件#三方框架 #Uniapp

news2025/5/29 3:26:29

使用 UniApp 开发的多图浏览器组件

在移动应用开发中，图片浏览器是非常常见且实用的功能，尤其是在社交、资讯、电商等场景下，用户对多图浏览体验的要求越来越高。随着 HarmonyOS（鸿蒙）生态的不断壮大，开发一套兼容鸿蒙的多图浏览器组件变得尤为重要。本文将结合 UniApp 跨平台开发的优势，详细讲解如何实现一个高性能、易扩展的多图浏览器组件，并分享实际案例和鸿蒙适配经验。

为什么要自定义多图浏览器组件？

虽然市面上有不少现成的图片浏览插件，但在实际项目中，往往会遇到如下需求：

支持图片预览、滑动切换、缩放、保存等多种交互；
需要自定义样式、动画或与业务深度结合；
兼容多端，尤其是 HarmonyOS 设备的适配和体验优化；
支持大图加载优化、懒加载、占位图等性能需求。

自定义组件不仅能满足个性化需求，还能提升整体用户体验。

组件设计思路

设计一个多图浏览器组件，需要考虑以下几个方面：

图片数据管理：支持本地图片、网络图片混合浏览。
交互体验：流畅的滑动切换、手势缩放、双击放大、长按保存等。
性能优化：图片懒加载、缓存、占位图，避免卡顿。
鸿蒙适配：在鸿蒙端保证手势、动画、保存图片等能力正常。
易用性与扩展性：props 设计合理，便于业务集成和后续扩展。

组件实现

我们以 swiper + image 组合为基础，配合手势库实现缩放和保存。

1. 组件结构

在 components/multi-image-viewer/multi-image-viewer.vue 下新建组件：

<template>
  <view class="multi-image-viewer" v-if="visible">
    <swiper :current="current" class="swiper" @change="onChange">
      <swiper-item v-for="(img, idx) in images" :key="idx">
        <view class="img-wrapper">
          <image
            :src="img"
            mode="aspectFit"
            class="img"
            @touchstart="onTouchStart"
            @touchmove="onTouchMove"
            @touchend="onTouchEnd"
            @longpress="onLongPress(img)"
            :show-menu-by-longpress="false"
          />
        </view>
      </swiper-item>
    </swiper>
    <view class="indicator">{{ current + 1 }}/{{ images.length }}</view>
    <view class="close-btn" @click="close">×</view>
  </view>
</template>

<script>
export default {
  name: 'MultiImageViewer',
  props: {
    images: {
      type: Array,
      required: true
    },
    start: {
      type: Number,
      default: 0
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      current: this.start,
      touchStart: null,
      touchMove: null
    };
  },
  watch: {
    start(val) {
      this.current = val;
    },
    visible(val) {
      if (val) this.current = this.start;
    }
  },
  methods: {
    onChange(e) {
      this.current = e.detail.current;
    },
    close() {
      this.$emit('update:visible', false);
    },
    onLongPress(img) {
      // 保存图片到相册，兼容鸿蒙需在manifest.json声明权限
      uni.saveImageToPhotosAlbum({
        filePath: img,
        success: () => {
          uni.showToast({ title: '已保存到相册', icon: 'success' });
        },
        fail: () => {
          uni.showToast({ title: '保存失败', icon: 'none' });
        }
      });
    },
    // 简单手势处理（可扩展为缩放等）
    onTouchStart(e) {
      this.touchStart = e.touches[0];
    },
    onTouchMove(e) {
      this.touchMove = e.touches[0];
    },
    onTouchEnd() {
      // 可扩展为双击、缩放等
    }
  }
};
</script>

<style scoped>
.multi-image-viewer {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.swiper {
  width: 100vw;
  height: 70vh;
}
.img-wrapper {
  width: 100vw;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img {
  max-width: 100vw;
  max-height: 70vh;
  border-radius: 8rpx;
  background: #eee;
}
.indicator {
  color: #fff;
  font-size: 32rpx;
  margin-top: 24rpx;
}
.close-btn {
  position: absolute;
  right: 40rpx;
  top: 40rpx;
  color: #fff;
  font-size: 56rpx;
  font-weight: bold;
  z-index: 10;
  cursor: pointer;
}
</style>

2. 组件使用示例

在页面中引用并使用多图浏览器组件：

<template>
  <view>
    <view class="thumbs">
      <image
        v-for="(img, idx) in imgList"
        :key="idx"
        :src="img"
        class="thumb"
        @click="openViewer(idx)"
      />
    </view>
    <multi-image-viewer
      :images="imgList"
      :start="viewerIndex"
      :visible.sync="viewerVisible"
    />
  </view>
</template>

<script>
import MultiImageViewer from '@/components/multi-image-viewer/multi-image-viewer.vue';

export default {
  components: { MultiImageViewer },
  data() {
    return {
      imgList: [
        'https://img.example.com/1.jpg',
        'https://img.example.com/2.jpg',
        'https://img.example.com/3.jpg'
      ],
      viewerVisible: false,
      viewerIndex: 0
    };
  },
  methods: {
    openViewer(idx) {
      this.viewerIndex = idx;
      this.viewerVisible = true;
    }
  }
};
</script>

<style scoped>
.thumbs {
  display: flex;
  gap: 16rpx;
  padding: 32rpx;
}
.thumb {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  object-fit: cover;
  background: #f5f5f5;
}
</style>