imageAdaptation 图片自适应排列

Minions_Fatman

于 2021-08-31 14:21:50 发布

阅读量221

点赞数

分类专栏： uniapp vue 文章标签： html5 前端

本文链接：https://blog.csdn.net/minions_fatman/article/details/120016928

版权

uniapp 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

该博客介绍了一个uniapp插件，用于文本缩略显示和图片自适应。根据图片数量，图片会以不同尺寸展示。当点击图片时，会调用预览功能，支持长按操作并能预览整个图片列表。代码示例展示了模板、脚本和样式部分，适用于uniapp的前端开发。

摘要由CSDN通过智能技术生成

这是一个Uniapp插件，项目实例地址：uniapp-文本缩略显示&img自适应

<template>
<view>
	<view class="fsc wrap">
		<view :class="imgList.length>=3?'wp-32 mg-lr-5 mg-t-8':'mg-lr-8 mg-t-15'"
		v-for="(item,index) in imgList" :key="index"
		@click="previewImg(index)">
			<block v-if="imgList.length==1">
				<image :src="item" class="w-300 radius20 h-400" mode="widthFix"></image>
			</block>
			<block v-if="imgList.length==2">
				<image :src="item" class="w-260 radius20" mode="widthFix"></image>
			</block>
			<block v-if="imgList.length>=3">
				<image :src="item" class="wp-100 h-260 radius15" mode="aspectFill"></image>
			</block>
		</view>
	</view>
</view>
</template>

<script>
export default {
	name: 'imageAdaptation',
	props: {
		imgList: {
			type: Array,
			default: []
		},
	},
	data() {
		return {
			
		}
	},
	methods: {
		// 预览图片
		previewImg(_index) {
			uni.previewImage({
				current: _index, //  传 Number H5端出现不兼容
				urls: this.imgList,
				longPressActions: {
					itemList: ['保存图片'],
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
image{ vertical-align: middle; }
</style>