appApplet/components/custom-preview/img-video-preview.vue

<template>
	<view>
		<swiper class="swiper-preview" :duration="500"
		:style="{width:nwidth+'px',height:nheight + 'px'}"
		:current="currentNum" @change="changeSwiper">
			<swiper-item v-for="(item,index) in list" :key="index">
				<!-- 可上下滚动框 -->
				<view :class="ifCenter ? 'disjcac' : 'dis'" scroll-y="true" :style="{height:nheight + 'px'}" style="overflow: hidden;overflow-y: scroll;">
					<!-- 视频 -->
					<video v-if="item.src.includes('.mp4')" :src="item.src" controls enable-play-gesture show-center-play-btn></video>
					<!-- 图片 -->
					<image :class="'img--'+index" v-else class="width100" :src="item.src" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 头部信息 -->
		<view class="swiper-text-box">
			<view class="fon28 mar-x10 disjbac fe">
				<!-- 标题 -->
				<view v-if="list[currentNum].title" class="clips1 width100" :style="{color:titlec}">{{list[currentNum].title}}</view>
				<!-- 描述 -->
				<view class="flexs pad-sx10 pad-zy20 radius10 colf" :style="{background: changeBackgroundColor}"><text>{{currentNum+1}}</text>/<text>{{list.length}}</text></view>
			</view>
			<!-- 当前索引-1和总数 -->
			<view v-if="list[currentNum].content" class="clips2 fon24 line-h40" :style="{color:contentc}">{{list[currentNum].content}}</view>
		</view> 
		<!-- 取消按钮 -->
		<view class="swiper-close-btn" @tap="closeCustomEv">关闭</view>
	</view>
</template>

<script>
	export default {
		name:"img-preview",
		props:{
			list:{
				type:Array,
				default:()=>{
					return [
						{src:'',title:'标题',content:'描述描述描述描述描述描述描述描述'},
						{src:'',title:'标题',content:'描述描述描述描述描述描述描述描述'},
						{src:'',title:'标题',content:'描述描述描述描述描述描述描述描述'},
					]
				}
			},
			// 窗体宽度
			nwidth:{
				type:String,
				default: uni.getSystemInfoSync().windowWidth+''
			},
			// 窗体高度
			nheight:{
				type:String,
				default: uni.getSystemInfoSync().windowHeight+''
			},
			// 标题颜色
			titlec:{
				type:String,
				default:'#FFFFFF'
			},
			// 描述颜色
			contentc:{
				type:String,
				default:'#F5F5F5'
			},
			imgcurrent:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				currentNum:0,
				changeBackgroundColor:'#000000',
				ntop: uni.getSystemInfoSync().statusBarHeight + 50,
				ifCenter:true
			};
		},
		mounted() {
			this.currentNum = this.imgcurrent*1;
			setTimeout(()=>{
				this.obtainImgHeight('img--0');
			},100)
		},
		methods:{
			obtainImgHeight(classStr) {
				classStr = `.${classStr}`;
				const query = wx.createSelectorQuery().in(this)
				query.select(classStr).boundingClientRect((rect) => {
					// console.log(rect.height,classStr);
					console.log(this.nheight,rect.height);
					if(this.nheight < rect.height) {
						// 如果屏幕的高度小于当前图片的高度
						this.ifCenter = false;
					} else {
						this.ifCenter = true;
					}
				}).exec()
			},
			// 改变预览
			changeSwiper(e) {
				this.currentNum = e.detail.current;//当前的指示点下标
				this.obtainImgHeight(`img--${this.currentNum}`);
				let colorArr = [];
				for (var i = 0; i < 6; i++) {
					colorArr.push(Math.floor(Math.random()*10))
				}
				this.changeBackgroundColor = `#${colorArr.join('')}`;
			},
			// 关闭预览
			closeCustomEv() {
				this.$emit('closeCustomEv',false);
			}
		}
	}
</script>

<style>
.swiper-preview{
	position: fixed;top: 0;left: 0;right: 0;bottom: 0;
	background-color: rgba(0, 0, 0, 1);
	z-index: 100;
}
.swiper-img{
	width: 100%;
}
.swiper-text-box{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	color: #000000;
	background-color: rgba(0, 0, 0, .6);
	padding: 20rpx;
}
.swiper-close-btn{
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 60rpx;
	padding: 20rpx 80rpx;
	background-color: #FFFFFF;
	color: #000000;
	font-size: 28rpx;
	font-weight: bold;
	z-index: 100;
	border-radius: 10rpx;
	animation: closeBtn 2s ease-in-out alternate infinite;
}
@keyframes closeBtn {
	from{background-color: #FFFFFF;color: #000000;}
	to{background-color: #000000;color: #FFFFFF;}
}
</style>