<template>
|
<view class="tn-swiper__wrap-class tn-swiper__wrap" :style="{borderRadius: `${radius}rpx`}">
|
<!-- 轮播图 -->
|
<swiper
|
class="tn-swiper"
|
:class="[backgroundColorClass]"
|
:style="[swiperStyle]"
|
:current="current"
|
:interval="interval"
|
:circular="circular"
|
:autoplay="autoplay"
|
:duration="duration"
|
:previous-margin="effect3d ? effect3dPreviousSpacing + 'rpx' : '0'"
|
:next-margin="effect3d ? effect3dPreviousSpacing + 'rpx' : '0'"
|
@change="change"
|
>
|
<swiper-item
|
v-for="(item, index) in list"
|
:key="index"
|
class="tn-swiper__item"
|
>
|
<view
|
class="tn-swiper__item__image__wrap"
|
:class="[swiperIndex !== index ? 'tn-swiper__item__image--scale' : '']"
|
:style="{
|
borderRadius: `${radius}rpx`,
|
transform: effect3d && swiperIndex !== index ? 'scaleY(0.9)' : 'scaleY(1)',
|
margin: effect3d && swiperIndex !== index ? '0 20rpx' : 0
|
}"
|
@click="click(index)"
|
>
|
<image class="tn-swiper__item__image" :src="item[name] || item" :mode="imageMode"></image>
|
<view
|
v-if="title && item[titleName]"
|
class="tn-swiper__item__title tn-text-ellipsis"
|
:style="[titleStyle]">
|
{{ item[titleName] }}
|
</view>
|
</view>
|
</swiper-item>
|
</swiper>
|
|
<!-- 指示点 -->
|
<view class="tn-swiper__indicator" :style="[indicatorStyle]">
|
<block v-if="mode === 'rect'">
|
<view
|
v-for="(item, index) in list"
|
:key="index"
|
class="tn-swiper__indicator__rect"
|
:class="{'tn-swiper__indicator__rect--active': swiperIndex === index}"
|
></view>
|
</block>
|
<block v-if="mode === 'dot'">
|
<view
|
v-for="(item, index) in list"
|
:key="index"
|
class="tn-swiper__indicator__dot"
|
:class="{'tn-swiper__indicator__dot--active': swiperIndex === index}"
|
></view>
|
</block>
|
<block v-if="mode === 'round'">
|
<view
|
v-for="(item, index) in list"
|
:key="index"
|
class="tn-swiper__indicator__round"
|
:class="{'tn-swiper__indicator__round--active': swiperIndex === index}"
|
></view>
|
</block>
|
<block v-if="mode === 'number'">
|
<view class="tn-swiper__indicator__number">{{ swiperIndex + 1 }}/{{ list.length }}</view>
|
</block>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: 'tn-swiper',
|
props: {
|
// 轮播图列表数据
|
// [{image: xxx.jpg, title: 'xxxx'}]
|
list: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
// 初始化时，默认显示第几项
|
current: {
|
type: Number,
|
default: 0
|
},
|
// 高度
|
height: {
|
type: Number,
|
default: 250
|
},
|
// 背景颜色
|
backgroundColor: {
|
type: String,
|
default: 'transparent'
|
},
|
// 图片的属性名
|
name: {
|
type: String,
|
default: 'image'
|
},
|
// 是否显示标题
|
title: {
|
type: Boolean,
|
default: false
|
},
|
// 标题的属性名
|
titleName: {
|
type: String,
|
default: 'title'
|
},
|
// 用户自定义标题样式
|
titleStyle: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
// 圆角的值
|
radius: {
|
type: Number,
|
default: 8
|
},
|
// 指示器模式
|
// rect -> 方形 round -> 圆角方形 dot -> 点 number -> 轮播图下标
|
mode: {
|
type: String,
|
default: 'round'
|
},
|
// 指示器位置
|
// topLeft \ topCenter \ topRight \ bottomLeft \ bottomCenter \ bottomRight
|
indicatorPosition: {
|
type: String,
|
default: 'bottomCenter'
|
},
|
// 开启3D缩放效果
|
effect3d: {
|
type: Boolean,
|
default: false
|
},
|
// 在3D缩放模式下，item之间的间隔
|
effect3dPreviousSpacing: {
|
type: Number,
|
default: 50
|
},
|
// 自定播放
|
autoplay: {
|
type: Boolean,
|
default: true
|
},
|
// 图片之间播放间隔多久
|
interval: {
|
type: Number,
|
default: 3000
|
},
|
// 轮播间隔时间
|
duration: {
|
type: Number,
|
default: 500
|
},
|
// 是否衔接滑动
|
circular: {
|
type: Boolean,
|
default: true
|
},
|
// 图片裁剪模式
|
imageMode: {
|
type: String,
|
default: 'aspectFill'
|
}
|
},
|
computed: {
|
backgroundColorStyle() {
|
return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
|
},
|
backgroundColorClass() {
|
return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
|
},
|
swiperStyle() {
|
let style = {}
|
if (this.backgroundColorStyle) {
|
style.backgroundColor = this.backgroundColorStyle
|
}
|
if (this.height) {
|
style.height = this.height + 'rpx'
|
}
|
return style
|
},
|
indicatorStyle() {
|
let style = {}
|
if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
|
if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent = 'center'
|
if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent = 'flex-end'
|
if (['topLeft','topCenter','topRight'].indexOf(this.indicatorPosition) >= 0) {
|
style.top = '12rpx'
|
style.bottom = 'auto'
|
} else {
|
style.top = 'auto'
|
style.bottom = '12rpx'
|
}
|
style.padding = `0 ${this.effect3d ? '74rpx' : '24rpx'}`
|
|
return style
|
},
|
swiperTitleStyle() {
|
let style = {}
|
if (this.mode === 'none' || this.mode === '') style.paddingBottom = '12rpx'
|
if (['bottomLeft','bottomCenter','bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode === 'number') {
|
style.paddingBottom = '60rpx'
|
} else if (['bottomLeft','bottomCenter','bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode !== 'number') {
|
style.paddingBottom = '40rpx'
|
} else {
|
style.paddingBottom = '12rpx'
|
}
|
|
style = Object.assign(style, this.titleStyle)
|
return style
|
}
|
},
|
data() {
|
return {
|
// 当前显示的item的index
|
swiperIndex: this.current
|
}
|
},
|
watch: {
|
list(newVal, oldVal) {
|
// 如果修改了list的数据，重置current的值
|
if (newVal.length !== oldVal.length) this.swiperIndex = 0
|
},
|
current(value) {
|
// 监听外部current的变化，实时修改内部依赖于此测swiperIndex值，如果更新了current，而不是更新swiperIndex，就会错乱，因为指示器是依赖于swiperIndex的
|
this.swiperIndex = value
|
}
|
},
|
methods: {
|
click(index) {
|
this.$emit('click', index)
|
},
|
// 图片自动切换时触发
|
change(event) {
|
const current = event.detail.current
|
this.swiperIndex = current
|
this.$emit('change', current)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.tn-swiper {
|
|
&__wrap {
|
position: relative;
|
overflow: hidden;
|
transform: translateY(0);
|
}
|
|
&__item {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
overflow: hidden;
|
|
&__image {
|
width: 100%;
|
height: 100%;
|
will-change: transform;
|
display: block;
|
/* #ifdef H5 */
|
pointer-events: none;
|
/* #endif */
|
|
&__wrap {
|
width: 100%;
|
height: 100%;
|
flex: 1;
|
transition: all 0.5s;
|
overflow: hidden;
|
box-sizing: content-box;
|
position: relative;
|
}
|
|
&--scale {
|
transform-origin: center center;
|
}
|
}
|
|
&__title {
|
width: 100%;
|
position: absolute;
|
background-color: rgba(0, 0, 0, 0.3);
|
bottom: 0;
|
left: 0;
|
font-size: 28rpx;
|
padding: 12rpx 24rpx;
|
color: rgba(255, 255, 255, 0.8);
|
}
|
}
|
|
&__indicator {
|
padding: 0 24rpx;
|
position: absolute;
|
display: flex;
|
flex-direction: row;
|
width: 100%;
|
z-index: 1;
|
|
&__rect {
|
width: 26rpx;
|
height: 8rpx;
|
background-color: rgba(0, 0, 0, 0.3);
|
transition: all 0.5s;
|
|
&--active {
|
background-color: rgba(255, 255, 255, 0.8);
|
}
|
}
|
|
&__dot {
|
width: 14rpx;
|
height: 14rpx;
|
margin: 0 6rpx;
|
border-radius: 20rpx;
|
background-color: rgba(0, 0, 0, 0.3);
|
transition: all 0.5s;
|
|
&--active {
|
background-color: rgba(255, 255, 255, 0.8);
|
}
|
}
|
|
&__round {
|
width: 14rpx;
|
height: 14rpx;
|
margin: 0 6rpx;
|
border-radius: 20rpx;
|
background-color: rgba(0, 0, 0, 0.3);
|
transition: all 0.5s;
|
|
&--active {
|
width: 34rpx;
|
background-color: rgba(255, 255, 255, 0.8);
|
}
|
}
|
|
&__number {
|
padding: 6rpx 16rpx;
|
line-height: 1;
|
background-color: rgba(0, 0, 0, 0.3);
|
color: rgba(255, 255, 255, 0.8);
|
border-radius: 100rpx;
|
font-size: 26rpx;
|
}
|
}
|
}
|
</style>
|
