title: 相册Album

相册 Album

图片展示组件，展示传入的图片。常见使用场景：微信朋友圈，商品评论。

使用方法

引用组件，通过urls属性传入图片链接,urls应为网络图片链接或本地绝对路径。组件自动展示urls中的图片。

图片列表

urls接收一个数组，数组内元素可以有两种格式。

• 数组元素为字符串

['图片1.jpg','图片2.jpg','图片3.jpg']

• 数组元素为对象，对象中包含url属性，且url属性值的类型为字符串。对象可以包含其他任意属性。

[{
    url:'1.jpg',
      key: 'key1'
 },{
     url:'2.jpg',
      key:'key2',
      value:2
}]

:::tip

两种格式根据实际情况自行选择，但不能混用，同一组件内只能使用同一种格式。

在组件事件中返回的detail内容，与传入的urls内容保持一致。

:::

指定key

当urls数组元素为对象时，可以通过key属性指定数据源的键值（即url）

data:{
    urls:[{
        newUrl:'1.jpg',
          key: 'key1'
     },{
         newUrl:'2.jpg',
          key:'key2',
          value:2
    }]
}

<l-album urls='{{urls}}' key='newUrl'></l-album>

图片展示

组件分为单图展示和多图展示两种情景，组件会根据传入的urls长度自动布局，不需要单独指定。

1. 单图

当 urls 长度为 1 时，为单图展示情景。组件将所传图片等比压缩，长边压缩/拉伸至 360rpx。

组件只包含图片部分，其他部分代码为展示用。

:::img :::

示例代码

<view>
    <view class="album">
        <l-avatar class="avatar" size='80' shape="square" src="" />
        <view class="right">
            <view class="name">Lin-UI-27315</view>
            <view class='content'>一张横屏图片的展示，宽为360rpx。</view>
            <l-album urls='{{urls}}'></l-album>
        </view>
    </view>
    <view class="line"></view>
</view>
<view>
    <view class="album">
        <l-avatar class="avatar" size='80' shape="square" src="" />
        <view class="right">
            <view class="name">Lin-UI-27315</view>
            <view class='content'>一张竖屏图片的展示，高为360rpx。</view>
            <l-album urls='{{urls}}'></l-album>
        </view>
    </view>
    <view class="line"></view>
</view>

.album {
    display: flex;
    flex-direction: row;
}
.avatar {
    margin-left: 20rpx;
}
.right {
    margin-left: 20rpx;
}
.name {
    color: rgb(91, 108, 160);
    font-weight: 450;
}
.content {
    margin-top: 7rpx;
    margin-right: 10rpx;
    color: black;
    font-weight: 445;
    margin-bottom: 15rpx;
}
.line {
    height: 1px;
    border-top: solid Silver 1px;
    margin-bottom: 40rpx;
    margin-top: 30rpx;
}

1. 多图

当 urls 长度大于 1 时，为多图展示情景。多图展示时，最多展示 9 张照片，如果所传 urls 长度超过 9，组件自动截取前 9 张照片进行展示。

多图情景下，图片展示为边长158rpx的正方形图片。

:::img :::

示例代码

<view>
    <view class="album">
        <l-avatar class="avatar" size='80' shape="square" src="" />
        <view class="right">
            <view class="name">Lin-UI-27315</view>
            <view class='content'>多张图片展示，显示为边长158rpx的正方形。</view>
            <l-album urls='{{urls}}'></l-album>
        </view>
    </view>
    <view class="line"></view>
</view>
<view>
    <view class="album">
        <l-avatar class="avatar" size='80' shape="square" src="" />
        <view class="right">
            <view class="name">Lin-UI-27315</view>
            <view class='content'>多张图片展示，自动按照朋友圈显示规则排序。</view>
            <l-album urls='{{urls}}'></l-album>
        </view>
    </view>
    <view class="line"></view>
</view>

    wxss文件同上

:::tip 多图展示规则 传入的urls长度不同，组件采用不同的布局形式，具体布局形式如下：

2图: 一行两列

3图: 一行三列

4图: 两行两列

5、6图: 两行三列

7、8、9图: 三行三列 :::

预览

组件图片是否支持预览，默认状态为支持，可以通过设置preview属性为false关闭。

图片尺寸

1. 单图

单张图片时，组件将所传图片等比压缩，长边压缩/拉伸至360rpx。通过设置single-size可以更改长边大小，单位rpx。

1. 多图

多张图片时，图片展示为边长158rpx的正方形图片。通过设置multiple-size可以更改图片边长，单位rpx

图像间隔

此设置仅在多图展示时生效

通过设置gap-row和gap-column属性来更改多图时，图片的水平间隔和竖直间隔，默认值为10,单位rpx;

裁剪、缩放模式

单图情景和多图情景下的裁剪、缩放模式可单独设置，互相不受影响。组件根据传入urls长度自动选择对应裁剪、缩放方式进行图片展示。

1. 单图 属性single-mode可以更改单图展示时图片的裁剪、缩放模式，默认值aspectFit。

2. 多图
   属性multiple-mode可以更改多图展示时图片的裁剪、缩放模式，默认值aspectFill。

:::img :::

示例代码

<view>
    <view class="album">
        <l-avatar class="avatar" size='80' shape="square" src="" />
        <view class="right">
            <view class="name">Lin-UI-27315</view>
            <view class='content'>通过single-mode可以更改单图时图片裁剪、缩放的模式。示例为center模式。</view>
            <l-album urls='{{urls}}' single-mode='center'></l-album>
        </view>
    </view>
    <view class="line"></view>
</view>
<view>
    <view class="album">
        <l-avatar class="avatar" size='80' shape="square" src="" />
        <view class="right">
            <view class="name">Lin-UI-27315</view>
            <view class='content'>通过multiple-mode可以更改多图时图片裁剪、缩放的模式。示例为scaleToFill模式。</view>
            <l-album urls='{{urls}}' multiple-mode='scaleToFill'></l-album>
        </view>
    </view>
    <view class="line"></view>
</view>

    wxss文件同上

高级用法

为了满足用户的定制需求，我们新增了如下属性，可以让 Album 组件支持用户定制。

指定最大展示图片数量

通过设置属性 maxNumber 可以指定需要展示的最多图片数量。默认值为 9。当用户传递 urls 数组长度超过 maxNumber 指定数量时，超过的部分将不会展示。

是否预览全部图片

通过设置属性 previewFullImage 可以指定当所传图片数量超过 maxNumber 指定数量时，是否预览全部图片。默认值为 true（预览图片是指单击图片，进入预览模式，前提为 preview 设置为 true）

举例：设置 maxNumber 为 10 ，所传 urls 长度为 15 。当不设置 previewFullImage 或者将 previewFullImage 设置为 true 时，点击图片，进行预览，可预览全部图片（ 15 张图片）。且在展示时，最后一张图片会显示灰色蒙层，并提示 +n 。 n 为剩余未展示图片数量。示例中展示 +5 。

如果将 previewFullImage 设置为 false ，点击图片，进行预览，可预览10张图片( maxNumber 设置的值)。且在展示时，最后一张图片无蒙层及 +n 的提示。

设置每行显示图片数量

customRowNumber 属性可以设置是否开启自定义每行图片，默认为 false 。

当 customRowNumber 不设置或设置为 false 时，图片布局按照微信朋友圈布局规则显示（详情请查看上方多图展示规则）。

当 customRowNumber 设置为 true 时，可以通过属性 everyRowNumber 设置每行显示图片的数量，everyRowNumber 默认值为 3 。

属性

外部样式类

组件事件