增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
535
tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue
Normal file
535
tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue
Normal file
@@ -0,0 +1,535 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user