MoeNovaClient/components/swiper-card/swiper-card.vue

<template>
	<view class="container" :style="{width:`${containerWidth}rpx`,height:`${height}rpx`}" @touchstart="touchstart"
		@touchend="touchend">
		<view :class="['container-track_image',`trackImage-${index-1}`]" v-for="index in count" :key="index"
			@click="change(index-1)"
			:style="{left:(containerWidth - width) / 2 + 'rpx',width:`${width}rpx`,height:`${height}rpx`,...animations[index-1] || {}}"
			:ref="`trackImage-${index-1}`">
			<slot :name="`card-${index-1}`"></slot>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-NVUE
	const animationModule = weex.requireModule('animation')
	// #endif
	export default {
		data() {
			return {
				currentIndex: 1, // 当前显示的卡片索引
				startX: 0,
				endX: 0,
				isClick: false,
				animations: [],
			};
		},
		props: {
			containerWidth: {
				type: Number,
				default: 750
			},
			width: {
				type: Number,
				default: 128
			},
			height: {
				type: Number,
				default: 140
			},
			offsetStep: {
				type: Number,
				default: -15
			},
			scaleStep: {
				type: Number,
				default: 0.9
			},
			count: {
				type: Number,
				default: 3
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.layout()
			})
		},
		methods: {
			change(index) {
				if (!this.isClick) return;
				if (this.currentIndex == index) return;
				this.currentIndex = index
				this.layout(500)
			},
			touchstart(e) {
				this.startX = e.touches[0].pageX;
			}, 
			touchend(e) {
				this.endX = e.changedTouches[0].pageX
				if (this.startX > this.endX) {
					this.currentIndex++
				} else if (this.startX < this.endX) {
					this.currentIndex--
				} else {
					this.isClick = true
				}

				if (this.currentIndex > this.count - 1) {
					this.currentIndex = this.count - 1;
				} else if (this.currentIndex < 0) {
					this.currentIndex = 0; 
				}
				this.layout(500)
			},
			layout(duration) {
				for (let i = 0; i < this.count; i++) {
					// #ifdef APP-NVUE
					const dom = this.$refs[`trackImage-${i}`][0]
					// #endif
					// #ifndef APP-NVUE
					const dom = `trackImage-${i}`
					// #endif
					const dis = Math.abs(i - this.currentIndex);
					const xOffset = (i - this.currentIndex) * (this.offsetStep + this.width);
					const scale = this.scaleStep ** dis;
					const active = {
						dom,
						styles: {
							transform: `scale(${scale}) translateX(${xOffset/2}px)`
						},
						transformOrigin: 'center center',
						timingFunction: 'ease-out',
						duration,
					}

					this.animationActive(active, i)
				}
			},
			
			animationActive(active, i) {
				// #ifdef APP-NVUE
				return new Promise((resolve, reject) => {
					animationModule.transition(active.dom, {
						styles: active.styles || {},
						duration: active.duration,
						timingFunction: active.timingFunction,
						delay: active.delay || 0,
						transformOrigin: active.transformOrigin,
					}, () => {
						resolve()
					})
				})
				// #endif
				// #ifndef APP-NVUE
				this.$set(this.animations,i,active.styles)
				// #endif
			},
		},
	};
</script>

<style scoped>
	/* 外部容器，设置宽高 */
	.container {
		position: relative;
	}

	.container-track_image {
		position: absolute;
		transition: 0.5s ease; 
		transform-origin: center center;
	}
</style>