155 lines
4.1 KiB
Vue
155 lines
4.1 KiB
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> |