相册 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。

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

示例代码

<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的正方形图片。

示例代码

<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文件同上

多图展示规则

传入的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。

示例代码

<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 Attributes）

参数	说明	类型	可选值	默认值	版本号
urls	图片地址，详细说明见属性urls说明	Array	-	[]	0.7.2
key	指定替代键	String		url
preview	图片是否可预览	Boolean	true,false	true	0.7.2
single-size	单图时，图片长边的长度，单位rpx	Number	-	360	0.7.2
multiple-size	多图时，图片边长，单位rpx	Number	-	158	0.7.2
gap-row	多图时，图片水平间隔	Number	-	10	0.7.2
gap-column	多图时，图片垂直间隔	Number	-	10	0.7.2
single-mode	单图时，图片缩放裁剪的模式	String	见小程序image组件	aspectFit	0.7.2
multiple-mode	多图时，图片缩放裁剪的模式	String	见小程序image组件	aspectFill	0.7.2

外部样式类（Album ExternalClasses）

组件事件（Album Events）