仿快团团商品详情页底部按钮头像轮播（uniapp）

效果展示

原生小程序也可以直接搬过去，稍改一下即可，如需要的话再发一篇原生小程序的代码

html

<template>
	<view class="avatarList" :style="{ width: itemWidth * 3 - overlapWidth * 2 + 'rpx' }">
		<image
			:src="item.avatar"
			:animation="index === 0 ? firstAnimation : index === 1 ? secondAnimation : index === 2 ? lastAnimation : ''"
			v-for="(item, index) in pageAvatar"
			:key="index"
			:style="{ left: (itemWidth - overlapWidth) * index + 'rpx', zIndex: pageAvatar.length - index, width: itemWidth + 'rpx', height: itemWidth + 'rpx' }"
			class="avatarImage"
			:class="index > 2 && 'hidden'"
		/>
	</view>
</template>

核心JS

const animalTime = 400; // 动画时间
const intervalTime = 1000; // 定时器频率
export default {
	data() {
		return {
			firstAnimation: null,
			secondAnimation: null,
			lastAnimation: null,
			interval: null,
			pageAvatar: []
		};
	},
	props: {
		avatars: {
			type: Array,
			default: [
				// 'https://qw-cdn.gocdn.cc/images/2024/06/90d4cd14c2a540a284a506b05b8d5e1d.png',
				// 'https://qw-cdn.gocdn.cc/images/2024/06/6da8bc5b53054f769ab2e6c81970da3c.png',
				// 'https://qw-cdn.gocdn.cc/images/2024/06/9c04d4311cac4e7a8911d9ab35b9b453.png',
				// 'https://qw-cdn.gocdn.cc/images/2024/06/3425b9ac424f4026b605c2ac1101bcc0.png',
				// 'https://qw-cdn.gocdn.cc/images/2024/06/0e8a16c6b4e1416c8f89271d07a19219.png',
				// 'https://qw-cdn.gocdn.cc/images/2024/06/0e8a16c6b4e1416c8f89271d07a19219.png'
			]
		},
		style: {
			type: String,
			default: ''
		},
		// 图片宽度：rpx
		itemWidth: {
			type: Number,
			default: 52
		},
		// 重叠部分宽度：rpx
		overlapWidth: {
			type: Number,
			default: 20
		}
	},
	watch: {
		avatars: {
			handler(nVal, oVal) {
				console.log(nVal);
				let arr = [];
				nVal.forEach((i) => {
					arr = [...arr, ...i.list];
				});
				this.pageAvatar = arr;
			}
		},
		pageAvatar: {
			handler(nVal, oVal) {
				// console.log(nVal);
				this.interval && clearInterval(this.interval);
				this.startAnimation();
			}
		}
	},
	mounted() {
		// this.startAnimation();
	},
	methods: {
		startAnimation() {
			const { itemWidth, overlapWidth, pageAvatar } = this;
			if (pageAvatar.length < 3) {
				return;
			}
			// 创建animation对象
			var firstAnimation = uni.createAnimation();
			var secondAnimation = uni.createAnimation();
			var lastAnimation = uni.createAnimation();

			this.interval = setInterval(() => {
				// num1缩放动画
				firstAnimation.scale(0).step({ duration: animalTime });
				this.firstAnimation = firstAnimation.export();

				// num2、num3平移动画(除以2是rpx转px)
				const offsetX = (overlapWidth - itemWidth) / 2;
				secondAnimation.translate(offsetX, 0).step({ duration: animalTime });
				lastAnimation.translate(offsetX, 0).step({ duration: animalTime });
				this.secondAnimation = secondAnimation.export();
				this.lastAnimation = lastAnimation.export();

				// num3放大动画（animalTime + 50：表示前面两个动画结束，并且setData数据更新）
				setTimeout(() => {
					lastAnimation.scale(1).step({ duration: animalTime });
					this.lastAnimation = lastAnimation.export();
				}, animalTime + 50);

				// 还原动画 (等待缩小动画完成后再切换头像)
				setTimeout(() => {
					firstAnimation.scale(1).step({ duration: 0 });
					secondAnimation.translate(0, 0).step({ duration: 0 });
					lastAnimation.translate(0, 0).scale(0).step({ duration: 0 });
					this.pageAvatar = pageAvatar.slice(1).concat(pageAvatar[0]);
					this.lastAnimation = lastAnimation.export();
					this.firstAnimation = firstAnimation.export();
					this.secondAnimation = secondAnimation.export();
				}, animalTime);
			}, intervalTime);
		}
	}
};

一、css

.avatarList {
	display: flex;
	flex-direction: row;
	position: relative;
	/* height: 100%; */
	height: 56rpx;
}

.avatarImage {
	position: absolute;
	border: 2rpx solid #fff;
	border-radius: 50%;
	background-color: #f6f6f6;
}

.hidden {
	display: none;
}