效果图

在这里插入图片描述

点击后打印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   张伯灵  阅读(227)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)



点击右上角即可分享
微信分享提示