<template>
|
<view
|
class="tn-c-swiper-class tn-c-swiper"
|
>
|
<!-- 轮播item容器-->
|
<view class="tn-swiper__container" :style="[swiperContainerStyle]" :animation="containerAnimation">
|
<slot></slot>
|
</view>
|
|
<!-- 轮播指示器-->
|
<view v-if="indicator" class="tn-swiper__indicator" :class="[`tn-swiper__indicator--${vertical ? 'vertical' : 'horizontal'}`]" :style="[indicatorStyle]">
|
<!-- 方形 -->
|
<block v-if="indicatorType === 'rect'">
|
<view
|
v-for="(item, index) in children.length"
|
:key="index"
|
class="tn-swiper__indicator__rect"
|
:class="[
|
`tn-swiper__indicator__rect--${vertical ? 'vertical' : 'horizontal'}`,
|
currentIndex === index ? `tn-swiper__indicator__rect--active tn-swiper__indicator__rect--active--${vertical ? 'vertical' : 'horizontal'}` : ''
|
]"
|
:style="[indicatorPointStyle(index)]"
|
></view>
|
</block>
|
<!-- 点 -->
|
<block v-if="indicatorType === 'dot'">
|
<view
|
v-for="(item, index) in children.length"
|
:key="index"
|
class="tn-swiper__indicator__dot"
|
:class="[
|
`tn-swiper__indicator__dot--${vertical ? 'vertical' : 'horizontal'}`,
|
currentIndex === index ? `tn-swiper__indicator__dot--active tn-swiper__indicator__dot--active--${vertical ? 'vertical' : 'horizontal'}` : ''
|
]"
|
:style="[indicatorPointStyle(index)]"
|
></view>
|
</block>
|
<!-- 圆角方形 -->
|
<block v-if="indicatorType === 'round'">
|
<view
|
v-for="(item, index) in children.length"
|
:key="index"
|
class="tn-swiper__indicator__round"
|
:class="[
|
`tn-swiper__indicator__round--${vertical ? 'vertical' : 'horizontal'}`,
|
currentIndex === index ? `tn-swiper__indicator__round--active tn-swiper__indicator__round--active--${vertical ? 'vertical' : 'horizontal'}` : ''
|
]"
|
:style="[indicatorPointStyle(index)]"
|
></view>
|
</block>
|
<!-- 序号 -->
|
<block v-if="indicatorType === 'number' && !vertical">
|
<view class="tn-swiper__indicator__number">{{ currentIndex + 1 }}/{{ children.length }}</view>
|
</block>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: 'tn-custom-swiper',
|
props: {
|
// 当前所在的轮播位置
|
current: {
|
type: Number,
|
default: 0
|
},
|
// 自动切换
|
autoplay: {
|
type: Boolean,
|
default: false
|
},
|
// 自动切换时间间隔
|
interval: {
|
type: Number,
|
default: 5000
|
},
|
// 滑动动画时长
|
duration: {
|
type: Number,
|
default: 500
|
},
|
// 是否采用衔接滑动
|
circular: {
|
type: Boolean,
|
default: false
|
},
|
// 滑动方向为纵向
|
vertical: {
|
type: Boolean,
|
default: false
|
},
|
// 显示指示点
|
indicator: {
|
type: Boolean,
|
default: false
|
},
|
// 指示点类型
|
// rect -> 方形 round -> 圆角方形 dot -> 点 number -> 轮播图下标
|
indicatorType: {
|
type: String,
|
default: 'dot'
|
},
|
// 指示点的位置
|
// topLeft \ topCenter \ topRight \ bottomLeft \ bottomCenter \ bottomRight
|
indicatorPosition: {
|
type: String,
|
default: 'bottomCenter'
|
},
|
// 指示点激活时颜色
|
indicatorActiveColor: {
|
type: String,
|
default: ''
|
},
|
// 指示点未激活时颜色
|
indicatorInactiveColor: {
|
type: String,
|
default: ''
|
},
|
// 前一个轮播的自定义样式
|
prevSwiperStyle: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
// 当前轮播的自定义样式
|
customSwiperStyle: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
// 后一个轮播的自定义样式
|
nextSwiperStyle: {
|
type: Object,
|
default() {
|
return {}
|
}
|
}
|
},
|
computed: {
|
parentData() {
|
return [
|
this.duration,
|
this.currentIndex,
|
this.swiperContainerAnimationFinish,
|
this.circular,
|
this.vertical,
|
this.prevSwiperStyle,
|
this.customSwiperStyle,
|
this.nextSwiperStyle
|
]
|
},
|
indicatorStyle() {
|
let style = {}
|
if (this.vertical) {
|
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) {
|
if (this.vertical) {
|
style.right = '12rpx'
|
style.left = 'auto'
|
} else {
|
style.top = '12rpx'
|
style.bottom = 'auto'
|
}
|
} else {
|
if (this.vertical) {
|
style.right = 'auto'
|
style.left = '12rpx'
|
} else {
|
style.top = 'auto'
|
style.bottom = '12rpx'
|
}
|
}
|
} else {
|
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'
|
}
|
}
|
return style
|
},
|
indicatorPointStyle() {
|
return (index) => {
|
let style = {}
|
if (index === this.currentIndex && this.indicatorActiveColor !== '') {
|
style.backgroundColor = this.indicatorActiveColor
|
} else if (this.indicatorInactiveColor !== '') {
|
style.backgroundColor = this.indicatorInactiveColor
|
}
|
return style
|
}
|
}
|
},
|
watch: {
|
parentData() {
|
if (this.children.length) {
|
this.children.forEach((item) => {
|
// 判断子组件如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
|
typeof(item.updateParentData) === 'function' && item.updateParentData()
|
})
|
}
|
},
|
current(nVal, oVal) {
|
if (this.currentIndex === nVal) return
|
this.currentIndex = nVal > this.children.length ? this.children.length - 1 : nVal
|
this.swiperContainerAnimationFinish = false
|
// 设置动画过渡时间
|
this.swiperContainerStyle.transitionDuration = `${this.duration + 90}ms`
|
this.updateSwiperContainerItem(oVal)
|
}
|
},
|
data() {
|
return {
|
// 清除动画定时器
|
clearAnimationTimer: null,
|
// 前后衔接执行定时器
|
convergeTimer: null,
|
// 自动轮播Timer
|
autoPlayTimer: null,
|
// 当前选中的轮播
|
currentIndex: this.current,
|
// swiperContainer样式
|
swiperContainerStyle: {
|
transform: 'translate3d(0px, 0px, 0px)',
|
transitionDuration: '0ms'
|
},
|
// swiperContainer动画
|
containerAnimation: {},
|
// 滑动动画结束标记
|
swiperContainerAnimationFinish: false
|
}
|
},
|
created() {
|
this.children = []
|
},
|
mounted() {
|
this.$nextTick(() => {
|
const index = this.currentIndex > this.children.length ? this.children.length - 1 : this.currentIndex
|
this.updateSwiperContainerStyle(index)
|
this.startAutoPlay()
|
})
|
},
|
methods: {
|
// 更新全部swiperItem的样式
|
updateAllSwiperItemStyle() {
|
this.children.forEach((item, index) => {
|
typeof(item.updateSwiperItemStyle) === 'function' && item.updateSwiperItemStyle(this.children.length)
|
})
|
|
},
|
// 根据swiperIndex更新swiperItemContainer的样式
|
updateSwiperContainerStyle(index) {
|
if (this.vertical) {
|
this.swiperContainerStyle.transform = `translate3d(0px, ${-index * 100}%, 0px)`
|
} else {
|
this.swiperContainerStyle.transform = `translate3d(${-index * 100}%, 0px, 0px)`
|
}
|
},
|
// 根据传递的值更新swiperItemContainer的位置
|
updateSwiperContainerStyleWithValue(value) {
|
if (this.vertical) {
|
this.swiperContainerStyle.transform = `translate3d(0px, ${(-this.currentIndex * 100) + value * 100}%, 0px)`
|
} else {
|
this.swiperContainerStyle.transform = `translate3d(${(-this.currentIndex * 100) + value * 100}%, 0px, 0px)`
|
}
|
},
|
// 根据传递的方向更新swiperItemContainer的位置
|
updateSwiperContainerStyleWithDirection(direction) {
|
const oldCurrent = this.currentIndex
|
const childrenLength = this.children.length
|
const lastSwiperItemIndex = childrenLength - 1
|
this.swiperContainerAnimationFinish = false
|
|
|
// 向后切换一个SwiperItem
|
if (direction === 'reset') {
|
// 设置动画过渡时间
|
this.swiperContainerStyle.transitionDuration = `${this.duration}ms`
|
this.updateSwiperContainerStyle(this.currentIndex)
|
this.clearAnimationTimer = setTimeout(() => {
|
this.clearSwiperContainerAnimation()
|
}, this.duration)
|
} else if (direction === 'reload') {
|
this.clearConvergeSwiperItemTimer()
|
this.clearSwiperContainerAnimation()
|
this.updateSwiperItemStyle(0)
|
this.updateSwiperItemStyle(lastSwiperItemIndex)
|
} else {
|
if (direction === 'left' || direction === 'up') {
|
if (oldCurrent === childrenLength - 1 && !this.circular) {
|
this.clearSwiperContainerAnimation()
|
this.clearConvergeSwiperItemTimer()
|
return
|
}
|
this.currentIndex = oldCurrent + 1 >= childrenLength ? 0 : oldCurrent + 1
|
} else if (direction === 'right' || direction === 'down') {
|
if (oldCurrent === 0 && !this.circular) {
|
this.clearSwiperContainerAnimation()
|
this.clearConvergeSwiperItemTimer()
|
return
|
}
|
this.currentIndex = oldCurrent - 1 < 0 ? childrenLength - 1 : oldCurrent - 1
|
}
|
// 设置动画过渡时间
|
this.swiperContainerStyle.transitionDuration = `${this.duration + 90}ms`
|
// this.updateSwiperItemContainerRect(this.currentIndex)
|
}
|
|
// console.log(direction, oldCurrent, this.currentIndex);
|
this.updateSwiperContainerItem(oldCurrent)
|
|
// 切换轮播时触发事件
|
this.$emit('change', {
|
current: this.currentIndex
|
})
|
},
|
// 设置自动轮播
|
startAutoPlay() {
|
if (this.autoplay && !this.autoPlayTimer && this.circular) {
|
this.autoPlayTimer = setInterval(() => {
|
this.updateSwiperContainerStyleWithDirection('left')
|
}, this.interval)
|
}
|
},
|
// 停止自动轮播
|
stopAutoPlay() {
|
if (this.autoPlayTimer) {
|
clearInterval(this.autoPlayTimer)
|
this.autoPlayTimer = null
|
}
|
},
|
// 更新swiperContainer和swiperItem相关联信息
|
updateSwiperContainerItem(oldCurrent) {
|
const childrenLength = this.children.length
|
const lastSwiperItemIndex = childrenLength - 1
|
// 判断当前是否为头尾，如果是更新对应的头尾SwiperItem样式
|
// 更新swiperItemContainer的样式
|
if (oldCurrent === 0 && this.currentIndex === lastSwiperItemIndex) {
|
// 先移动到最左边然后再去除动画偏移到正常的位置
|
// this.swiperContainerStyle.transform = `translate3d(100%, 0px, 0px)`
|
this.updateSwiperContainerStyle(-1)
|
this.clearSwiperContainerAnimationTimer()
|
this.clearAnimationTimer = setTimeout(() => {
|
this.convergeSwiperItem()
|
}, this.duration)
|
} else if (oldCurrent === lastSwiperItemIndex && this.currentIndex === 0) {
|
// 先移动到最右边然后再去除动画偏移到正常的位置
|
// this.swiperContainerStyle.transform = `translate3d(${-childrenLength * 100}%, 0px, 0px)`
|
this.updateSwiperContainerStyle(childrenLength)
|
this.clearSwiperContainerAnimationTimer()
|
this.clearAnimationTimer = setTimeout(() => {
|
this.convergeSwiperItem()
|
}, this.duration)
|
} else {
|
this.updateSwiperContainerStyle(this.currentIndex)
|
this.updateSwiperItemStyle(0)
|
this.updateSwiperItemStyle(lastSwiperItemIndex)
|
this.clearAnimationTimer = setTimeout(() => {
|
this.clearSwiperContainerAnimation()
|
}, this.duration)
|
}
|
},
|
// 更新对应swiperItem的信息
|
updateSwiperItemStyle(index) {
|
const childrenLength = this.children.length
|
if (index < 0) index = 0
|
if (index > childrenLength - 1) index = childrenLength - 1
|
|
typeof(this.children[index].updateSwiperItemStyle) === 'function' && this.children[index].updateSwiperItemStyle(childrenLength, this.currentIndex)
|
},
|
// 更新对应swiperItem的容器信息
|
updateSwiperItemContainerRect(index) {
|
const childrenLength = this.children.length
|
if (index < 0) index = 0
|
if (index > childrenLength - 1) index = childrenLength - 1
|
|
typeof(this.children[index].getSwiperItemRect) === 'function' && this.children[index].getSwiperItemRect()
|
},
|
// 执行前后衔接
|
convergeSwiperItem() {
|
const lastSwiperItemIndex = this.children.length - 1
|
this.clearSwiperContainerAnimation()
|
this.clearConvergeSwiperItemTimer()
|
this.convergeTimer = setTimeout(() => {
|
this.updateSwiperItemStyle(0)
|
this.updateSwiperItemStyle(lastSwiperItemIndex)
|
this.updateSwiperContainerStyle(this.currentIndex)
|
this.clearConvergeSwiperItemTimer()
|
}, 30)
|
},
|
// 停止/清除切换动画
|
clearSwiperContainerAnimation() {
|
this.swiperContainerStyle.transitionDuration = `0ms`
|
this.swiperContainerAnimationFinish = true
|
this.clearSwiperContainerAnimationTimer()
|
},
|
// 停止/清除执行前后衔接定时器
|
clearConvergeSwiperItemTimer() {
|
if (this.convergeTimer) {
|
clearTimeout(this.convergeTimer)
|
this.convergeTimer = null
|
}
|
},
|
// 停止/清除切换动画定时器
|
clearSwiperContainerAnimationTimer() {
|
if (this.clearAnimationTimer) {
|
clearTimeout(this.clearAnimationTimer)
|
this.clearAnimationTimer = null
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tn-c-swiper {
|
position: relative;
|
overflow: hidden;
|
width: 100%;
|
height: 100%;
|
|
.tn-swiper {
|
&__container {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
|
will-change: transform;
|
transition-property: all;
|
transition-timing-function: ease-out;
|
}
|
|
&__indicator {
|
position: absolute;
|
display: flex;
|
z-index: 1;
|
|
&--horizontal {
|
padding: 0 24rpx;
|
flex-direction: row;
|
width: 100%;
|
}
|
&--vertical {
|
padding: 24rpx 0;
|
flex-direction: column;
|
height: 100%;
|
}
|
|
&__rect {
|
background-color: rgba(0, 0, 0, 0.3);
|
transition: all 0.5s;
|
|
&--horizontal {
|
width: 26rpx;
|
height: 8rpx;
|
}
|
&--vertical {
|
width: 8rpx;
|
height: 26rpx;
|
}
|
|
&--active {
|
background-color: rgba(255, 255, 255, 0.8);
|
}
|
}
|
|
&__dot {
|
width: 14rpx;
|
height: 14rpx;
|
border-radius: 20rpx;
|
background-color: rgba(0, 0, 0, 0.3);
|
transition: all 0.5s;
|
|
&--horizontal {
|
margin: 0 6rpx;
|
}
|
&--vertical {
|
margin: 6rpx 0;
|
}
|
|
&--active {
|
background-color: rgba(255, 255, 255, 0.8);
|
}
|
}
|
|
&__round {
|
width: 14rpx;
|
height: 14rpx;
|
border-radius: 20rpx;
|
background-color: rgba(0, 0, 0, 0.3);
|
transition: all 0.5s;
|
|
&--horizontal {
|
margin: 0 6rpx;
|
}
|
&--vertical {
|
margin: 6rpx 0;
|
}
|
|
&--active {
|
background-color: rgba(255, 255, 255, 0.8);
|
|
&--horizontal {
|
width: 34rpx;
|
}
|
&--vertical {
|
height: 34rpx;
|
}
|
}
|
}
|
|
&__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>
|
