微信小程序翻书动画组件

<view class='container_box'>
	<view class='page_last'>
		<block wx:for='{{imgArr}}' wx:key='{{index}}'>
			<view
			 class="photo_item i_{{index}} {{item.isturn?'left':'right'}}"
			 style="z-index:{{item.zIndex}}"
			 data-index='{{index}}'
			 bindtouchstart='touchStart'
			 bindtouchend='touchEnd'
			 bindtransitionend='transitionend'
			>
				<image src='{{item.src}}' mode='aspectFill'></image>
			</view>
		</block>
	</view>
</view>

let dataSource = [
	"https://t7.baidu.com/it/u=954153296,2797898137&fm=193&f=GIF",
	"https://img0.baidu.com/it/u=919322343,9900989&fm=253&fmt=auto&app=138&f=JPEG?w=728&h=500",
	"https://img1.baidu.com/it/u=3512166882,1513526432&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
	"https://img1.baidu.com/it/u=1635908731,513902843&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500",
];

Page({
	data: {
		imgArr: [],
		flag: true,
		currentIndex: 0,
		startX: 0,
	},
	onLoad: function (options) {
		// 获取列表图片信息
		let arr = [];
		// 对返回的数据进行改写
		dataSource.forEach((src, index) => {
			let obj = {};
			obj.isturn = false;
			obj.src = src;
			arr.push(obj);
			if (!index) {
				obj.zIndex = 30;
			} else {
				obj.zIndex = 10;
			}
		});
		this.setData({
			imgArr: arr,
		});
	},

	touchStart(e) {
		console.log("touchStart");
		this.setData({
			startX: e.touches[0].pageX,
		});
	},
	// 这是判断手指滑动的幅度有多大向哪边滑动
	touchEnd(e) {
		console.log("touchEnd");
		// console.log(e.changedTouches[0].pageX);
		// return

		let index = e.currentTarget.dataset.index;

		this.setData({
			currentIndex: index,
		});
		if (this.data.startX - e.changedTouches[0].pageX >= 50 && this.data.flag) {
			if (index < this.data.imgArr.length - 1) {
				this.change(this.data.currentIndex);
			} else {
				wx.showToast({
					icon: "none",
					title: "后面没有了",
				});
			}
		} else if (this.data.startX - e.changedTouches[0].pageX <= -50 && this.data.flag) {
			if (index > 0) {
				this.change(this.data.currentIndex - 1);
			} else {
				wx.showToast({
					icon: "none",
					title: "前面没有了",
				});
			}
		}
	},

	// 点击图片切换类名来控制翻页效果
	change(index) {
		if (this.data.flag) {
			this.data.flag = true;

			let imgs = this.data.imgArr;
			imgs.map((ele, i) => {
				if (index == i) {
					imgs[i].isturn = !imgs[i].isturn;
					imgs[i].zIndex = 30;
				} else {
					imgs[i].zIndex = 10;
				}
			});
			if (index - 1 >= 0) {
				imgs[index - 1].zIndex = 20;
			}
			if (index + 1 < imgs.length) {
				imgs[index + 1].zIndex = 20;
			}

			this.setData({
				imgArr: imgs,
				currentIndex: index,
			});
		}
	},
	// transition动画结束
	transitionend() {
		this.data.flag = true;
	},
});

.container_box {
	width: 100%;
}
.page_first,
.page_last {
	width: 80%;
	height: 480rpx;
}
.page_first {
	display: flex;
	box-sizing: border-box;
	padding: 0 20rpx;
	text-align: center;
}
.page_last {
	position: relative;
}
.photo_item {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	border: 1rpx solid #eee;
	background-color: #fff;
}
image {
	width: 100%;
	height: 100%;
}
.left,
.right {
	transform-style: preserve-3d; /* 开启3d转换效果 */
	transform-origin: 0% center; /* 设置基点位置 */
	perspective: 1000; /* 定义3D元素距视图的距离 */
	transition: all 1s ease-in-out;
}
.left {
	transform: perspective(2000rpx) rotateY(-180deg);
}
.right {
	transform: perspective(2000rpx) rotateY(0deg);
}
.zindex1 {
	z-index: 1;
}
.zindex2 {
	z-index: 2;
}
.zindex3 {
	z-index: 3;
}