<template>
|
<view class="img" :style="{ opacity: opacity, zIndex: zindex }">
|
<view class="img_content">
|
<view class="img_content_tu">
|
<image class="left" src="@/static/ic_left@2x.png" mode="widthFix" @click="jian"></image>
|
<view class="img_content_tu_nr">
|
<swiper style="width: 100%; height: 100%;" @change="handlechange" :current="mycurrent" :indicator-dots="false" :circular="true" :interval="1000" :duration="1000">
|
<swiper-item v-for="(item,index) in imgList" :key="index">
|
<view :class="['swiper-item',index == mycurrent ? 'active' : '']">
|
<image :src="item" style="width: 100%;height: 100%;" mode="aspectFit" />
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
<image class="right" src="@/static/ic_right@2x.png" mode="widthFix" @click="add"></image>
|
</view>
|
<view class="img_content_close">
|
<image src="@/static/ic_close@2x.png" mode="widthFix" @click="close"></image>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
opacity: 0,
|
zindex: '-1',
|
mycurrent: 0
|
}
|
},
|
props: {
|
imgList: {
|
type: Array,
|
default: () => []
|
}
|
},
|
methods: {
|
add() {
|
if (this.imgList.length - 1 === this.mycurrent) return
|
this.mycurrent++
|
},
|
jian() {
|
if (this.mycurrent === 0) return
|
this.mycurrent--
|
},
|
handlechange(e){
|
this.mycurrent=e.detail.current
|
},
|
open(i) {
|
this.mycurrent = i
|
this.zindex = 3
|
this.opacity = 1
|
},
|
close() {
|
this.zindex = '-1'
|
this.opacity = 0
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.img {
|
width: 100vw;
|
height: 100vh;
|
background: rgba(0,0,0,0.4);
|
position: fixed;
|
transition: .2s;
|
top: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.img_content {
|
display: flex;
|
flex-direction: column;
|
.img_content_tu {
|
display: flex;
|
align-items: center;
|
.img_content_tu_nr {
|
width: 600px;
|
height: 600px;
|
padding: 30px;
|
box-sizing: border-box;
|
border-radius: 8px;
|
margin: 0 32px;
|
display: flex;
|
align-items: center;
|
flex-wrap: nowrap;
|
.swiper-item{
|
width: 100%;
|
border-radius: 30rpx;
|
overflow: hidden;
|
// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
|
// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
|
// width: 450rpx;
|
height: 100%;
|
// transform: scale(1);
|
// transition: all 0.5s ease;
|
text-align: center;
|
// transition: all 0.5s ease-in-out;
|
}
|
.img_content_tu_nr_item {
|
width: 100%;
|
height: 600px;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.left {
|
width: 80px;
|
height: 80px;
|
cursor: pointer;
|
}
|
.right {
|
width: 80px;
|
height: 80px;
|
cursor: pointer;
|
}
|
}
|
.img_content_close {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 40px;
|
image {
|
width: 60px;
|
height: 60px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
