guosen-ldt-shop/pagesPoster/comps/mp-swiper.vue

<template>
	<view class="swiper">
		<view class="swiper-title">
			<swiper :style="{height:fullHeight}" class="swiper-tall" :indicator-dots="indicatorDots"
				:autoplay="autoplay" :previous-margin="previousMargin" :next-margin="nextMargin" :circular="circular"
				@change="change" :current="swiperCurrentIndex">
				<swiper-item class="swiper-container" v-for="(item,index) in list" :key="index" :item-id="index"
					:data-year="index">
					<view :animation="animationData[index]" class="swiper-item" >
						<image :src="name?item[name]:item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="center flex-direction">
			<text  style="margin-bottom: 50rpx;font-size: 32rpx;">{{list[swiperCurrentIndex].name}}</text>
			<view @click="operate" class="cu-btn  flex round text-lg"
				style="padding: 46rpx 0;background-color: #EF9944;color: #FFFFFF;width: 76%;">
				<u-icon margin-left="10" label-color="#fff" :label="operateText" :name="iconName"></u-icon>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			list: Array,
			name: String,
			iconName:String,
			operateText:{
				type:String,
				default:'下一步'
			}
		},
		data() {
			return {
				screenHeight: 0,
				animationData: {
					0: {},
					1: {},
					2: {},
					3: {}
				},
				title: '0',
				indicatorDots: false,
				autoplay: false,
				previousMargin: uni.upx2px(82) + 'px',
				nextMargin: uni.upx2px(82) + 'px',
				circular: true,
				zoomParam: 1.10,
				swiperCurrentIndex: 0,
				data: [],
				max: 0,
			}
		},
		computed: {
			fullHeight() {
				const res = uni.getSystemInfoSync();
				return res.windowHeight - (res.statusBarHeight + 44) + 'px';
			}
		},
		created() {
			this.animation = uni.createAnimation();
			this.animation.scale(this.zoomParam).step();
			this.animationData[0] = this.animation.export();
		},
		methods: {
			operate() {
				this.$emit('click', this.swiperCurrentIndex)
			},
			change(e) {
				this.swiperCurrentIndex = e.detail.current;
				this.title = e.detail.currentItemId;
				for (let key in this.animationData) {
					if (e.detail.currentItemId == key) {
						this.animation.scale(this.zoomParam).step();
						this.animationData[key] = this.animation.export();
					} else {
						this.animation.scale(1.0).step();
						this.animationData[key] = this.animation.export();
					}
				}
				this.$emit('change', this.list[this.swiperCurrentIndex].image)
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-wrap: wrap;
	}

	.save-btn {
		background-color: #EF9944;
		color: #FFFFFF;
	}

	.swiper-container {
		display: flex;
		align-items: center;
	}

	.swiper-item {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		height: 760upx;
		width: 544upx;
		line-height: 300upx;
		text-align: center;
		margin-bottom: 50upx;
	}



	.swiper-tall {
		display: flex;
		align-items: center;
	}

	.swiper-title {
		margin-top: -100rpx;
		width: 760upx;
		text-align: center;
	}
</style>