效果图

在这里插入图片描述

点击后打印item

在这里插入图片描述

上代码

<template>
	<view class="background-modal">
		<view class="content">
			<view class="item-background-style" v-for="(item,idx) in itemImagesList" :key="idx" v-if="idx%2==0">
				<!-- 左边的 -->
				<view class="item-images-style" @click="getImageItem(itemImagesList[idx])">
					<image :src="itemImagesList[idx].url"></image>

				</view>
				<!-- 右边的 -->
				<view class="item-images-style" v-if="itemImagesList[idx+1]!=undefined"
					@click="getImageItem(itemImagesList[idx+1])">
					<image :src="itemImagesList[idx+1].url"></image>

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				//图片列表
				itemImagesList: [{
						id: 0,
						url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F02%2F20180702194633_pmqvy.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658981373&t=5e92c3355d144e0d5371d23521959fd4"
					},
					{
						id: 1,
						url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-5026700d7266f4cc59432cd6d6e1e564_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658981373&t=9ffa8578bc6cd658b6101ccdb4b4bf66"
					},
					{
						id: 2,
						url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Frichtext%2Flarge%2Fpublic%2Fp231769778.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658981373&t=33d293ef75d0209a5faf7d4871c1eb33"
					},
					{
						id: 3,
						url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F29%2F20200429183011_yskvq.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658981373&t=b31a9f7892e2ac79cb3a15f243df6923"
					},
					{
						id: 4,
						url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F03%2F20200603115002_hKG3C.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658981373&t=c838aa172aeaa0b4d92e4ab9c7a9ae73"
					},
					{
						id: 5,
						url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F14%2F20200414103000_symeg.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658981373&t=4f361712139f6e510d8fbab07139b8ac"
					},
					{
						id: 6,
						url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview%2Frichtext%2Flarge%2Fpublic%2Fp138849035.jpg&refer=http%3A%2F%2Fimg9.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658981373&t=7bb31d834784caf4f4714e177a028048"
					},
				],
			}
		},
		methods: {
			getImageItem(e) {
				console.log("item:", e);
			},
		}
	}
</script>
<style scoped>
	.background-modal {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	/* 内容 */
	.content {
		height: auto;
		width: 100%;
	}

	.item-background-style {
		width: 100%;
		height: 570rpx;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.item-images-style {
		width: 50%;
		height: 100%;
	}

	.item-images-style image {
		width: 100%;
		height: 100%;
	}
</style>


关注我的公众号SpaceObj 领取idea系列激活码

posted on 2023-05-10 18:02  张伯灵  阅读(315)  评论(0)    收藏  举报