更新記錄

1.0.0(2021-02-07)

首次提交組件

平臺兼容性

app

微信小程序

支付寶小程序

百度小程序

字節小程序

QQ小程序

快應用

2.9.7

√

×

×

×

×

×

h5-Safari

Android Browser

微信瀏覽器(Android)

QQ瀏覽器(Android)

Chrome

IE

Edge

Firefox

pc-Safari

√

√

√

√

√

√

√

√

√

實現朋友圈圖片自適應排列

說明

本組件通常用于需要處理朋友圈或者類似qq空間說說的圖片自動排列布局

用法示例

:imgLayout2="imgLayout2" :imgLayout3="imgLayout4">

import imageAdaptation from '../../marchVoiceComponents/marchCircle/imageAdaptation.vue'

export default {

components: {

imageAdaptation

},

data() {

return {

imgList: [

'../../static/img/cat.jpg','../../static/img/cat.jpg',

'../../static/img/cat.jpg','../../static/img/cat.jpg',

'../../static/img/cat.jpg','../../static/img/cat.jpg',

'../../static/img/cat.jpg','../../static/img/cat.jpg',

'../../static/img/cat.jpg'

],

imgLayout1:[300,702],

imgLayout2:[321,280],

imgLayout3:[220,220],

}

}

}

組件參數

屬性名

類型

默認值

說明

imgList

Arrary

null

需要展示的圖片路徑列表

imgLayout1

Arrary

null

當圖片只有一張(imgList.length==1)時，一排一列的布局

imgLayout2

Arrary

null

當圖片有兩張或四張(imgList.length==4||imgList.length==2)，每行兩列時的布局

imgLayout3

Arrary

null

當圖片有三張或五張(imgList.length==3||imgList.length==5)，每行三列時的布局

imgLayout1參數說明

注意：imgLayout2，imgLayout3參數性質與imgLayout1相同

類型

說明

參數1

參數2

Number

只能向屬性中定義兩個參數，用來表示圖片寬高，單位rpx

表示對應布局時圖片寬度

表示對應布局時圖片高度

補充：有任何問題聯系qq：780248307 。前端小姐姐，在線求打擾~

總結

以上是生活随笔為你收集整理的vue 图片自适应排列插件_朋友圈图片动态排列，qq说说图片自适应排列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。