spz-gallery 画廊

一种可交互的堆叠式画廊组件，支持横向和纵向两种排列模式，点击面板即可将其展开

布局

container

何时使用

需要在有限空间内展示多个内容面板，通过点击切换展开项
适合商品详情、图片集、信息展示等需要用户逐一浏览的场景

代码演示

基本用法

展示横向排列的默认画廊，初始展开第一个面板，点击其他面板可切换展开项。

面板 1

面板 2

面板 3

<spz-gallery id="spz-gallery-base" layout="container" initial-index="0">
  <div class="gallery-item">面板 1</div>
  <div class="gallery-item">面板 2</div>
  <div class="gallery-item">面板 3</div>
</spz-gallery>

使用方法控制展开项

通过按钮调用 expand 方法，以编程方式指定要展开的面板索引。

面板 1

面板 2

面板 3

<spz-gallery id="spz-gallery-api-usage" layout="container" initial-index="0">
  <div class="gallery-item">面板 1</div>
  <div class="gallery-item">面板 2</div>
  <div class="gallery-item">面板 3</div>
</spz-gallery>

<div class="demo-buttons">
  <button @tap="spz-gallery-api-usage.expand(index=0)">展开面板 1</button>
  <button @tap="spz-gallery-api-usage.expand(index=1)">展开面板 2</button>
  <button @tap="spz-gallery-api-usage.expand(index=2)">展开面板 3</button>
</div>

纵向堆叠模式

将 mode 设为 column，面板以纵向方式堆叠，折叠的面板只露出顶部一小部分。

面板 1：点击展开查看详细内容，这是竖向堆叠模式的演示。

面板 2：每个面板折叠后只显示顶部一小部分，点击可展开。

面板 3：通过 collapse-rate 控制折叠时露出的高度比例。

<spz-gallery id="spz-gallery-column-mode" layout="container" mode="column" collapse-rate="0.15" initial-index="0">
  <div class="gallery-item">面板 1：点击展开查看详细内容，这是竖向堆叠模式的演示。</div>
  <div class="gallery-item">面板 2：每个面板折叠后只显示顶部一小部分，点击可展开。</div>
  <div class="gallery-item">面板 3：通过 collapse-rate 控制折叠时露出的高度比例。</div>
</spz-gallery>

属性

属性名	说明	类型	默认值	是否必需
initial-index	初始展开的子面板索引，从 0 开始计数	number	0	否
mode	排列模式，`row` 为横向排列，`column` 为纵向堆叠	string	`row`	否
collapse-rate	折叠部分占比。横向模式下为折叠部分宽度与元素宽度之比；纵向模式下为折叠部分高度与容器宽度之比。取值为小数	number	`0.2`	否
min-collapse	折叠部分的最小尺寸，单位 px	number	`20`	否

方法

expand

展开指定索引的子面板。

参数	说明	类型	默认值	是否必须
index	要展开的子面板索引，从 0 开始计数	number	-	是