榆钱落尽槿花稀
01448b7113
新增了多个静态图片资源文件，包括01.png、02.png等，并添加了相关的配置文件和组件，如vue.config.js、package.json等。同时引入了Tuniao UI库，并配置了相关的依赖和设置，以支持项目的开发和构建。
278 lines
8.9 KiB
Vue
278 lines
8.9 KiB
Vue
<template>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view
|
||
class="tn-c-swiper-item"
|
||
:style="[swiperStyle]"
|
||
:itemData="itemData"
|
||
:currentIndex="currentIndex"
|
||
:containerData="containerData"
|
||
:change:itemData="wxs.itemDataObserver"
|
||
:change:currentIndex="wxs.currentIndexObserver"
|
||
:change:containerData="wxs.containerDataObserver"
|
||
@touchstart="wxs.touchStart"
|
||
:catch:touchmove="touching?wxs.touchMove:''"
|
||
:catch:touchend="touching?wxs.touchEnd:''"
|
||
>
|
||
<view class="item__container tn-c-swiper-item__container" :style="[containerStyle]">
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view
|
||
class="tn-c-swiper-item"
|
||
:style="[swiperStyle]"
|
||
:itemData="itemData"
|
||
:currentIndex="currentIndex"
|
||
:containerData="containerData"
|
||
:change:itemData="wxs.itemDataObserver"
|
||
:change:currentIndex="wxs.currentIndexObserver"
|
||
:change:containerData="wxs.containerDataObserver"
|
||
@touchstart="wxs.touchStart"
|
||
@touchmove="wxs.touchMove"
|
||
@touchend="wxs.touchEnd"
|
||
>
|
||
<view class="item__container tn-c-swiper-item__container" :style="[containerStyle]">
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</template>
|
||
|
||
<script src="./index.wxs" lang="wxs" module="wxs"></script>
|
||
<script>
|
||
export default {
|
||
name: 'tn-custom-swiper-item',
|
||
props: {
|
||
|
||
},
|
||
computed: {
|
||
// swiperItem公共数据
|
||
itemData() {
|
||
return {
|
||
index: this.index,
|
||
itemWidth: this.itemWidth,
|
||
itemHeight: this.itemHeight,
|
||
itemTop: this.itemTop,
|
||
itemLeft: this.itemLeft
|
||
}
|
||
},
|
||
currentIndex() {
|
||
return this.parentData.currentIndex
|
||
},
|
||
containerData() {
|
||
return {
|
||
duration: this.parentData.duration,
|
||
animationFinish: this.parentData.swiperContainerAnimationFinish,
|
||
circular: this.parentData.circular,
|
||
swiperItemLength: this.swiperItemLength,
|
||
vertical: this.parentData.vertical
|
||
}
|
||
},
|
||
swiperStyle() {
|
||
let style = {}
|
||
style.transform = `translate3d(${this.translateX}%, ${this.translateY}%, 0px)`
|
||
return style
|
||
},
|
||
containerStyle() {
|
||
let style = {}
|
||
if (this.parentData.customSwiperStyle && Object.keys(this.parentData.customSwiperStyle).length > 0) {
|
||
style = this.parentData.customSwiperStyle
|
||
}
|
||
if ((this.currentIndex === 0 && this.index === this.swiperItemLength - 1) || (this.index === this.currentIndex - 1) &&
|
||
(this.parentData.prevSwiperStyle && Object.keys(this.parentData.prevSwiperStyle).length > 0)
|
||
) {
|
||
// 前一个swiperItem
|
||
const copyStyle = JSON.parse(JSON.stringify(style))
|
||
style = Object.assign(copyStyle, this.parentData.prevSwiperStyle)
|
||
}
|
||
if ((this.currentIndex === this.swiperItemLength - 1 && this.index === 0) || (this.index === this.currentIndex + 1) &&
|
||
(this.parentData.nextSwiperStyle && Object.keys(this.parentData.nextSwiperStyle).length > 0)
|
||
) {
|
||
// 后一个swiperItem
|
||
const copyStyle = JSON.parse(JSON.stringify(style))
|
||
style = Object.assign(copyStyle, this.parentData.nextSwiperStyle)
|
||
}
|
||
return style
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 父组件参数
|
||
parentData: {
|
||
duration: 500,
|
||
currentIndex: 0,
|
||
swiperContainerAnimationFinish: false,
|
||
circular: false,
|
||
vertical: false,
|
||
prevSwiperStyle: {},
|
||
customSwiperStyle: {},
|
||
nextSwiperStyle: {}
|
||
},
|
||
// 标记当前是否正在触摸
|
||
touching: true,
|
||
// 当前swiperItem的偏移位置
|
||
translateX: 0,
|
||
translateY: 0,
|
||
// 当前swiperItem的宽高
|
||
itemWidth: 0,
|
||
itemHeight: 0,
|
||
// 当前swiperItem的位置信息
|
||
itemTop: 0,
|
||
itemLeft: 0,
|
||
// 当前swiperItem的状态 prev current next
|
||
status: 'current',
|
||
// 当前swiperItem的index序号
|
||
index: 0,
|
||
// swiperItem的的数量
|
||
swiperItemLength: 0
|
||
}
|
||
},
|
||
created() {
|
||
this.parent = false
|
||
this.updateParentData()
|
||
// 获取当前父组件children的数量作为当前swiperItem的序号
|
||
this.index = this.parent.children.length
|
||
this.parent && this.parent.children.push(this)
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.initSwiperItem()
|
||
})
|
||
},
|
||
methods: {
|
||
// 初始化swiperItem
|
||
initSwiperItem() {
|
||
this.getSwiperItemRect(() => {
|
||
this.parent.updateAllSwiperItemStyle()
|
||
this.parentData.swiperContainerAnimationFinish = true
|
||
})
|
||
},
|
||
// 获取swiperItem的信息
|
||
async getSwiperItemRect(callback) {
|
||
const swiperItemRes = await this._tGetRect('.tn-c-swiper-item')
|
||
if (!swiperItemRes.height || !swiperItemRes.width) {
|
||
setTimeout(() => {
|
||
this.getSwiperItemRect()
|
||
}, 30)
|
||
return
|
||
}
|
||
|
||
this.itemWidth = swiperItemRes.width
|
||
this.itemHeight = swiperItemRes.height
|
||
this.itemTop = swiperItemRes.top
|
||
this.itemLeft = swiperItemRes.left
|
||
callback && callback()
|
||
},
|
||
// 更新swiperItem样式
|
||
updateSwiperItemStyle(swiperItemLength, currentIndex = undefined) {
|
||
currentIndex = currentIndex != undefined ? currentIndex : this.parentData.currentIndex
|
||
this.swiperItemLength = swiperItemLength
|
||
// 根据当前swiperItem的序号设置偏移位置
|
||
// 判断当前swiperItem是否为第一个，如果是则将最后的swiperItem移动到当前的前一个位置（即最前面）
|
||
if (currentIndex === 0 && this.index === swiperItemLength - 1) {
|
||
if (this.parentData.vertical) {
|
||
this.translateX = 0
|
||
this.translateY = -100
|
||
} else {
|
||
this.translateX = -100
|
||
this.translateY = 0
|
||
}
|
||
}
|
||
// 判断当前swiperItem是否为最后一个，如果是则将最前的swiperItem移动到当前的后一个位置（即最后面）
|
||
else if (currentIndex === swiperItemLength - 1 && this.index === 0) {
|
||
if (this.parentData.vertical) {
|
||
this.translateX = 0
|
||
this.translateY = swiperItemLength * 100
|
||
} else {
|
||
this.translateX = swiperItemLength * 100
|
||
this.translateY = 0
|
||
}
|
||
}
|
||
// 正常情况
|
||
else {
|
||
if (this.parentData.vertical) {
|
||
this.translateX = 0
|
||
this.translateY = this.index * 100
|
||
} else {
|
||
this.translateX = this.index * 100
|
||
this.translateY = 0
|
||
}
|
||
}
|
||
},
|
||
// 更新父组件的偏移位置信息
|
||
updateParentSwiperContainerStyle(e) {
|
||
this.parent.updateSwiperContainerStyleWithValue(e.value)
|
||
},
|
||
// 根据方向更新父组件的偏移位置信息
|
||
updateParentSwiperContainerStyleWithDirection(e) {
|
||
this.parent.updateSwiperContainerStyleWithDirection(e.direction)
|
||
},
|
||
// 修改父组件的偏移位置的状态
|
||
changeParentSwiperContainerStyleStatus(e) {
|
||
// reset -> 重置 reload -> 重载
|
||
this.parent.updateSwiperContainerStyleWithDirection(e.status)
|
||
},
|
||
// 更新父组件信息
|
||
updateParentData() {
|
||
this.getParentData('tn-custom-swiper')
|
||
},
|
||
// 更新触摸状态
|
||
updateTouchingStatus(e) {
|
||
this.touching = e.status
|
||
if (e.status) {
|
||
this.parent.stopAutoPlay()
|
||
} else {
|
||
this.parent.startAutoPlay()
|
||
}
|
||
},
|
||
// 提取对应用户自定义样式
|
||
extractCustomStyle(customStyle) {
|
||
let data = {
|
||
transform: {},
|
||
style: {}
|
||
}
|
||
if (!customStyle) return data
|
||
// 允许设置的transform参数
|
||
const allowTransformProps = ['scale','scaleX','scaleY','scaleZ','rotate','rotateX','rotateY','rotateZ']
|
||
for (let prop in customStyle) {
|
||
if (prop.startsWith('transformProp')) {
|
||
// transform里面的样式
|
||
let transformProp = prop.substring('transformProp'.length)
|
||
const index = allowTransformProps.findIndex((item) => {
|
||
return item.toLowerCase() === transformProp.toLowerCase()
|
||
})
|
||
if (index !== -1) {
|
||
transformProp = allowTransformProps[index]
|
||
data.transform[transformProp] = customStyle[prop]
|
||
}
|
||
} else {
|
||
// 普通样式
|
||
data.style[prop] = customStyle[prop]
|
||
}
|
||
}
|
||
return data
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tn-c-swiper-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
display: block;
|
||
will-change: transform;
|
||
cursor: none;
|
||
transform: translate3d(0px, 0px, 0px);
|
||
|
||
.item__container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
position: absolute;
|
||
}
|
||
}
|
||
</style>
|