DCLOUDプラグイン市場が最初のuniappプラグインをリリース|友達の輪の中で写真のダイナミックな配置を実現

プロジェクトを作成する過程で、WeChatモーメントの画像配置と同様の機能を実装する必要があります。
私は単にそれを書き留め、同じテーブルlxxの励ましで、それをプラグインにパッケージ化し、DCLOUDプラグイン市場にリリースしました。

機能はとてもシンプルですが、とても実用的です〜

チュートリアルは以下のとおりです

瞬間の写真の適応配置を実現

説明

このコンポーネントは通常、Moments ofFriendsまたはQQスペースに類似した処理が必要な画像のレイアウトを自動的に配置するために使用されます。

使用例

<template>
	<view>
		<imageAdaptation :imgList="imgList" :imgLayout1="imgLayout1" 
                         :imgLayout2="imgLayout2" :imgLayout3="imgLayout4"></imageAdaptation>
    </view>
</template>

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	アラリー	ヌル	表示する必要のある画像パスのリスト
imgLayout1	アラリー	ヌル	画像が1枚しかない場合（imgList.length == 1）、レイアウトは1枚ずつです
imgLayout2	アラリー	ヌル	写真が2枚か4枚ある場合（imgList.length4 || imgList.length2）、各行に2つの列がある場合のレイアウト
imgLayout3	アラリー	ヌル	写真が3〜5枚ある場合（imgList.length3 || imgList.length5）、各行に3つの列がある場合のレイアウト

imgLayout1パラメーターの説明

注：imgLayout2およびimgLayout3には、imgLayout1と同じパラメータープロパティがあります。

の種類	説明	パラメータ1	パラメータ2
数	画像の幅と高さを示すために属性で定義できるパラメーターは2つだけで、単位はrpxです。	レイアウトに対応する場合の画像の幅を示します	対応するレイアウトでの画像の高さを示します

プラグインの詳細については、プラグインのアドレスにアクセスして
ください。サポートを歓迎します。ご不明な点がございましたら、繰り返し修理のためにご連絡ください〜