当前位置：首页 > news >正文

鸿蒙OSUniApp 开发的滑动图片墙组件#三方框架 #Uniapp

news 2025/5/29 14:32:08

UniApp 开发的滑动图片墙组件

前言

在移动应用中，图片墙是一种极具视觉冲击力的内容展示方式，广泛应用于相册、商品展示、社交分享等场景。一个优秀的滑动图片墙组件不仅要支持流畅的滑动浏览，还要兼容不同设备的分辨率和性能，尤其是在鸿蒙（HarmonyOS）等新兴平台上。本文将以 UniApp 为例，详细讲解如何开发一个高性能、易扩展、适配鸿蒙的滑动图片墙组件。

一、需求与设计思路

1. 需求分析

支持横向/纵向滑动浏览图片
图片自适应布局，支持多列展示
点击图片可预览大图
支持懒加载，提升性能
兼容鸿蒙平台，适配不同屏幕尺寸

2. 设计思路

使用 scroll-view 实现滑动容器，支持横向或纵向滑动
通过 v-for 渲染图片列表，支持动态数据
图片采用 image 组件，结合 mode 属性自适应显示
点击图片时调用图片预览API
懒加载可通过 :lazy-load 属性或第三方库实现

二、核心代码实现

1. 组件结构

<template><scroll-viewclass="img-wall":scroll-x="direction === 'x'":scroll-y="direction === 'y'":style="wallStyle"><view class="img-row" v-for="(row, rowIndex) in rows" :key="rowIndex"><imagev-for="(img, colIndex) in row":key="img.id || colIndex":src="img.url"class="img-item"mode="aspectFill":lazy-load="true"@click="preview(img, rowIndex, colIndex)"/></view></scroll-view>
</template>

2. 脚本逻辑

<script>
export default {name: 'ImgWall',props: {images: { type: Array, required: true },columns: { type: Number, default: 3 },direction: { type: String, default: 'y' }, // 'x' 或 'y'height: { type: String, default: '600rpx' },},computed: {rows() {// 按列数分组图片const arr = [];for (let i = 0; i < this.images.length; i += this.columns) {arr.push(this.images.slice(i, i + this.columns));}return arr;},wallStyle() {return this.direction === 'y' ? `height: ${this.height};` : 'white-space: nowrap;';},},methods: {preview(img, rowIndex, colIndex) {// 预览大图const urls = this.images.map(i => i.url);const index = rowIndex * this.columns + colIndex;uni.previewImage({urls,current: urls[index],indicator: 'number',loop: true,});},},
};
</script>

3. 样式设计

<style scoped>
.img-wall {width: 100%;background: #f7f7f7;overflow: hidden;
}
.img-row {display: flex;flex-direction: row;margin-bottom: 12rpx;
}
.img-item {flex: 1;height: 180rpx;margin: 0 8rpx;border-radius: 12rpx;background: #eee;object-fit: cover;transition: box-shadow 0.2s;
}
.img-item:active {box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.12);
}
</style>

三、父页面集成与使用示例

<template><img-wall :images="imgList" :columns="3" direction="y" height="600rpx" />
</template><script>
import ImgWall from '@/components/ImgWall.vue';
export default {components: { ImgWall },data() {return {imgList: [{ url: 'https://cdn.example.com/1.jpg' },{ url: 'https://cdn.example.com/2.jpg' },{ url: 'https://cdn.example.com/3.jpg' },{ url: 'https://cdn.example.com/4.jpg' },{ url: 'https://cdn.example.com/5.jpg' },{ url: 'https://cdn.example.com/6.jpg' },],};},
};
</script>