uni-app图片列表预览大图

叁歲伎倆 2023-07-25 06:25 26阅读 0赞

首先确定预览是新写一个页面还是搞一个弹窗，随你，我是新开一个页面的，然后在点击图片准备预览的时候，需要的参数有：  
1，当前点击图片的下标，  
2，当前点击图片的列表数组  
点击的时候将这些参数存起来：

父组件：  
// 点击预览

previewImg(item, index) {
        uni.setStorageSync("currentImgIndex",index)    // 当前下标
        uni.setStorageSync('imgPreviewPicList', item)  // 当前数组
        uni.navigateTo({
            url: '../imgPreview/imgPreview'             // 要跳转的预览页
        })
    },

预览页：  
`imgPreview.vue`：这个代码也很简单，一看即懂，就是用个swiper组件

<template>
    	<view class="previewImg">
    		<view class="mask">
    			<swiper @change="changeSwiper" class="my_swiper" :current="current" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration">
    				<swiper-item v-for="(x, y) in picList" :key="y">
    					<view class="bg_img" :style="{ backgroundImage: 'url('+x+')'}"></view>
    				</swiper-item>
    			</swiper>
    		</view>
    		<view class="page" v-if="picList.length>0">{
       { current + 1 }} / {
       { picList.length }}</view>
    	</view>
    </template>
    
    <script>
    export default { 
    	data() {
    		return {
    			picList: [],
    			indicatorDots: false,
    			autoplay: false,
    			duration: 500,
    			circular: true,
    			current: 0,
    			isShowSwiper: false
    		};
    	},
    	onLoad() {
    		this.picListInit();
    	}, 
    	methods: {
    		clickPic(index) {
    			this.current = index;
    			this.isShowSwiper = true;
    		},
    		async picListInit() {
    			this.current = uni.getStorageSync("currentImgIndex");
    			this.picList = uni.getStorageSync("imgPreviewPicList");
    		},
    		changeSwiper(e) {
    			this.current = e.target.current;
    		}
    	}
    };
    </script>
    
    <style lang="scss" scoped>
    .page {
    	position: fixed;
    	z-index: 6;
    	color: #fff;
    	bottom: 20rpx;
    	text-align: center;
    	width: 100%;
    }
    .mask {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	background-color: #000;
    	z-index: 5;
    	> .my_swiper {
    		width: 100%;
    		height: 60vh;
    		.bg_img {
    			background-size: 100% auto;
    			background-repeat: no-repeat;
    			background-position:center;
    			width: 100%;
    			height: 100%;
    		}
    	}
    }
    
    .pic_list {
    	display: flex;
    	flex-flow: row wrap;
    	> view {
    		flex: 0 0 33.3vw;
    		height: 33.3vw;
    		padding: 1vw;
    		> image {
    			width: 100%;
    			height: 100%;
    		}
    	}
    }
    </style>

实际效果如下图所示：

![在这里插入图片描述][20200413141144426.gif]

[20200413141144426.gif]: /images/20230528/ca7c05578e7f4f71a1339d1beda5a98f.png