更新记录

1.0.2（2024-07-17） 下载此版本

图片展示优化

1.0.1（2023-12-23） 下载此版本

样式调整

1.0.0（2023-12-19） 下载此版本

初始化

平台兼容性

uni-app

uni-image-list-item 组件

uni-image-list-item 是一个用于在 UniApp 项目中展示图片列表的组件。它提供了简洁的方式来显示一组图片，并支持点击预览功能。以下是如何使用此组件的详细指南。

组件安装

在您的 UniApp 项目中，可以直接复制上面提供的组件代码，并将其保存在项目的组件目录中。

使用说明

该组件接受几个重要的属性：

• label: 显示在图片列表上方的标签文本。
• labelWidth: 标签的宽度。
• imageUrlList: 要显示的图片 URL 数组。

组件也支持一个 empty 插槽，用于自定义空状态下的显示内容。

基本用法

在页面中引入 uni-image-list-item 组件，并传入必要的属性：

<template>
  <view>
    <uni-image-list-item
      label="图片列表"
      :labelWidth="100"
      :imageUrlList="imageUrls"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrls: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        // 更多图片 URL
      ]
    };
  }
};
</script>

自定义空状态内容

如果图片列表为空，您可以自定义显示的内容：

<uni-image-list-item
  label="图片列表"
  :labelWidth="100"
  :imageUrlList="[]"
>
  <template v-slot:empty>
    <text>没有图片可显示</text>
  </template>
</uni-image-list-item>

样式说明

组件的样式使用 SCSS 书写，您可以根据需要进行调整。例如，您可以更改图片的大小、边框半径或间隔。

注意事项

• 确保传入的 imageUrlList 是一个有效的 URL 数组。
• 如果您的图片来源于网络，确保 URL 是可访问的。
• 该组件依赖于 UniApp 的 uni.previewImage API 用于图片预览。

示例项目

待完善