效果图：

完整代码：

<template>
	<view class="page" @touchstart="touchstart" @touchend="touchend">
		<view v-if="showTopBlock">
			<view class="topBlockBg" @click="showTopBlock=false"></view>
			<view class="topBlock">
				<view class="pageNo">
					<text style="color: #009A82;font-size: 26rpx;margin-right: 8rpx;">第{{showIdx+1}}页 </text>
					<text> / 共{{topList.length}}页</text>
				</view>
				<scroll-view class="topImgs" :show-scrollbar="true" scroll-x="true">
					<view class="p_r" style="margin-top: 100rpx;">
						<view class="topItem" @click="showIdx=index" v-for="(item,index) in topList">
							<image class="topImg" :style="{zoom:showIdx===index?1.2:1,top:showIdx===index?'-38rpx':'0'}"
								:src="item" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<swiper :current="showIdx" @change="changeSwiper">
			<swiper-item v-for="(item,index) in imgList">

				<view class="xialaBlock" v-if="!showTopBlock&&index!==0&&showXiala" @click="showTopBlock=true">
					<image class="xiala" :src="xiala" mode="widthFix"></image>
				</view>
				<view class="pageItem">
					<image class="pageBg" :src="item" mode="widthFix"></image>
					<view class="" v-if="index==1">
						<view v-show="!show2_video" @click="play2()" class="p2Video">

						</view>
						<video v-show="show2_video" class="p2Video" id="myVideop2" :src="page2Video"></video>
					</view>
					<view class="p3cBlock" v-if="index==2">
						<view class="p_r">
							<view class="" v-for="(itemm,idxx) in p3mune" @click="p3MIdx=idxx">
								<image class="p3mItem" :src="p3MIdx===idxx?itemm.in:itemm.no" mode="widthFix">
								</image>
							</view>
						</view>
						<view class="p3centent">
							<image class="p3cententImg" :src="p3mune[p3MIdx].centent" mode="widthFix"></image>
						</view>
					</view>
					<view class="p4cBlock" v-if="index==3">
						<view v-show="!show4_1_video" @click="play4_1()" class="p4Video1">

						</view>
						<view v-show="!show4_2_video" @click="play4_2()" class="p4Video2">

						</view>
						<video id="myVideo1" v-show="show4_1_video" class="p4Video1" :src="page4_1Video"></video>
						<video id="myVideo2" v-show="show4_2_video" class="p4Video2" :src="page4_2Video"></video>
						<image class="zan zan1" :animation="animationZan1" @click="czan1" :src="isZan1?zan1:zanNo"
							mode="widthFix"></image>
						<view class="zanNumBlock p_r">
							<view class="shuzi1">
								{{sz1}}
							</view>
							<view class="heng1">

							</view>
							<view class="heng2">

							</view>
							<view class="shuzi2">
								{{sz2}}
							</view>
						</view>
						<image class="zan zan2" :animation="animationZan2" @click="czan2" :src="isZan2?zan2:zanNo"
							mode="widthFix"></image>
					</view>

					<view class="p5cBlock" v-if="index==4">
						<text class="txt" v-for="(item,idx) in txts">
							{{item}}
						</text>
					</view>
					<view class="p5cName" v-if="index==4&&!showName">

					</view>

				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	let oss = 'https://xxx/demo-slide-h5/'
	export default {
		components: {

		},
		data() {
			return {
				showXiala: true,
				left: '',
				showName: false,
				xiala: oss + 'xiala.png',
				txts: [],
				showIdx: 0,
				showTopBlock: false,
				sz1: 42,
				sz2: 28,
				isZan1: false,
				isZan2: false,
				p3MIdx: 0,
				animationData: false,
				animationZan1: false,
				animationZan2: false,
				page2Video: oss + 'page2Video.mp4?v=1',
				page4_1Video: oss + 'page4_1Video.mp4?v=1',
				page4_2Video: oss + 'page4_2Video.mp4?v=1',
				p3mune: [{
					in: oss + 'bai1In.png',
					no: oss + 'bai1No.png',
					centent: oss + '51.png',
				}, {
					in: oss + 'bai2In.png',
					no: oss + 'bai2No.png',
					centent: oss + '61.png',
				}, {
					in: oss + 'bai3In.png',
					no: oss + 'bai3No.png',
					centent: oss + '51.png',
				}],
				zan1: oss + 'zan1.png',
				zan2: oss + 'zan2.png',
				zanNo: oss + 'zanNo.png',
				topList: [
					oss + '1.jpg?v=1',
					oss + '2.jpg?v=1',
					oss + '31.jpg?v=1',
					oss + '41.jpg?v=1',
					oss + '5.jpg?v=1',
					// oss + '6.jpg?v=1'
				],
				imgList: [
					oss + '1.jpg?v=1',
					oss + '2.jpg?v=1',
					oss + '3.jpg?v=1',
					oss + '4.jpg?v=1',
					oss + '5.jpg?v=1',
					// oss + '6.jpg?v=1'
				],
				videoContext4_1: '',
				videoContext4_2: '',
				videoContext2: '',
				show4_1_video: false,
				show4_2_video: false,
				show2_video:false,
				startClientY: '',
			};
		},
		onLoad(option) {
			this.$common.Init.call(this);
			setTimeout(() => {
				this.showXiala = false;
			}, 20000)
		},
		onShow() {},
		onHide() {},
		methods: {
			changeSwiper(e) {
				console.log('e', e);
				this.showIdx = e.detail.current
				this.show4_1_video = false;
				this.show4_2_video = false;

				if (e.detail.current != 1) {
					if (this.videoContext2) this.videoContext2.pause()
				}
				
				if (e.detail.current != 3) {
					if (this.videoContext4_1) this.videoContext4_1.pause()
					if (this.videoContext4_2) this.videoContext4_2.pause()
				}

				if (e.detail.current == 4) {
					this.txts = [];
					let txt = '期待针对免疫治疗为基础的治疗模式不断研发，能够为患者带来更长生存的同时进一步提升生活质量。'
					let arr = txt.split('')
					console.log('arr', arr);
					this.addArr(arr, 0)
					setTimeout(() => {
						this.showName = true;
					}, (arr.length + 1) * 150)
				} else {
					this.showName = false;
				}
			},
			addArr(arr, idx) {
				if (idx == arr.length || this.showIdx != 4) {
					this.txts.pop()
					return;
				}
				setTimeout(() => {
					this.txts.pop()
					this.txts.push(arr[idx])
					this.txts.push('|')
					this.addArr(arr, idx + 1)
				}, 150)
			},
			anima(pageIdx, type) {
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})

				let zhuan = (pageIdx + 1) * 360
				if (type == 'left') {
					animation.translateX(-375).step()
					// animation.rotate(zhuan).step()
					this.showIdx = pageIdx;
				} else {
					animation.translateX(375).step()
					// animation.rotate(zhuan).step()
					this.showIdx = pageIdx;
				}
				// rotate rotateX rotateY rotateZ
				// animation.rotateZ(zhuan).step()

				this.animationData = animation.export()
				setTimeout(() => {
					this.showIdx = pageIdx;
					animation.translateX(0).step({
						duration: 10
					})
					this.animationData = animation.export()
				}, 500)
			},
			play2() {
				console.log('播放视频2');
				this.show2_video = true;
				this.show4_1_video = false;
				this.show4_2_video = false;
				
				this.videoContext2 = uni.createVideoContext('myVideop2')
				this.videoContext2.play()
			},
			play4_1() {
				console.log('播放视频41');
				this.show4_1_video = true;
				this.show4_2_video = false;
				this.videoContext4_1 = uni.createVideoContext('myVideo1')
				if (this.videoContext4_2) this.videoContext4_2.pause()
				if (this.videoContext2) this.videoContext2.pause()
				this.videoContext4_1.play()
			},
			play4_2() {
				console.log('播放视频42');
				this.show4_2_video = true;
				this.show4_1_video = false;
				this.videoContext4_2 = uni.createVideoContext('myVideo2')
				if (this.videoContext4_1) this.videoContext4_1.pause()
				if (this.videoContext2) this.videoContext2.pause()
				this.videoContext4_2.play()
			},
			czan1() {
				this.isZan1 = !this.isZan1;
				if (this.isZan1) {
					this.sz1 = this.sz1 + 1
				} else {
					this.sz1 = this.sz1 - 1
				}
				this.zananimation(1)
			},
			czan2() {
				this.isZan2 = !this.isZan2;
				if (this.isZan2) {
					this.sz2 = this.sz2 + 1
				} else {
					this.sz2 = this.sz2 - 1
				}
				this.zananimation(2)
			},
			zananimation(idx) {
				var animation = uni.createAnimation({
					duration: 200,
					timingFunction: 'ease',
				})
				animation.scale(1.2).step()
				animation.scale(1).step()
				if (idx == '1') {
					this.animationZan1 = animation.export()
				} else {
					this.animationZan2 = animation.export()
				}
			},
			touchstart(e) {
				this.left = 0
				this.startClientX = e.changedTouches[0].clientX;
				this.startClientY = e.changedTouches[0].clientY;

			},
			touchmove(e) {
				this.left = e.changedTouches[0].clientX - this.startClientX;
				console.log('this.left', this.left);
			},
			touchend(e) {
				this.endClientX = e.changedTouches[0].clientX;
				this.left = 0
				if (e.changedTouches[0].clientY - this.startClientY > 80) {
					console.log('下滑');
					this.showTopBlock = true;
					return
				}
				if (this.startClientX - this.endClientX > 80) {
					console.log('左滑');
					if (this.showIdx < this.imgList.length - 1) {
						// this.showIdx = this.showIdx + 1
						// let pageIdx = this.showIdx + 1
						// this.anima(pageIdx, 'left')
					} else {
						// uni.showToast({
						// 	title: '最后一页拉~',
						// 	icon: "none"
						// })
					}
				}
				if (this.endClientX - this.startClientX > 80) {
					console.log('右滑', 'right');
					if (this.showIdx > 0) {
						// this.showIdx = this.showIdx - 1
						// let pageIdx = this.showIdx - 1
						// this.anima(pageIdx)
					} else {
						// uni.showToast({
						// 	title: '到第一页拉~',
						// 	icon: "none"
						// })
					}
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	swiper,
	swiper-item,
	.page {
		position: absolute;
		top: 0;
		width: 100vw;
		min-height: 100vh;
	}

	.xialaBlock {
		position: absolute;
		top: 30rpx;
		width: 60rpx;
		height: 60rpx;
		left: 50vw;
		margin-left: -30rpx;
		z-index: 3;

		.xiala {
			width: 40rpx;
			animation: mydeamon 1s infinite; //1s值一秒内完成动画
			-webkit-animation: mydeamon 1s infinite;
			/* Safari and Chrome */
		}
	}

	@keyframes mydeamon {
		0% {
			transform: scale(2); //scale代表闪烁的体型变化，其他倾斜等样式自行搜索
			opacity: 1; //透明程度
		}

		100% {
			transform: scale(1);
			opacity: 0;
		}
	}

	.p5cName {
		position: absolute;
		top: 750rpx;
		width: 86vw;
		height: 200rpx;
		left: 7vw;
		z-index: 4;
		background-color: #fff;
		letter-spacing: 8rpx;
		line-height: 80rpx;
	}

	.p5cBlock {
		position: absolute;
		top: 400rpx;
		height: 250rpx;
		width: 86vw;
		left: 7vw;
		z-index: 4;
		background-color: #fff;
		letter-spacing: 8rpx;
		line-height: 80rpx;
		font-family: "Lucida Calligraphy", cursive, serif, sans-serif;

		.txt {
			width: 32rpx;
			height: 32rpx;
			color: #009A82;
			border-bottom: 1px solid #00d4ad;
			padding-bottom: 4rpx;
		}
	}

	.topBlockBg {
		position: fixed;
		height: 100vh;
		width: 100vw;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.topBlock {
		position: fixed;
		top: 0;
		height: 420rpx;
		width: 100vw;
		z-index: 999;
		background-color: #fff;

		.topImgs {
			width: 92vw;
			margin-left: 4vw;
			// border-bottom: 4px solid #f0f0f0;
			// padding-bottom: 20rpx;
			height: 380rpx;
		}

		.topImg {
			width: 120rpx;
			margin-right: 20rpx;
			border: 1px solid #f0f0f0;
			position: relative;
			bottom: 0;
		}

		.pageNo {
			position: absolute;
			right: 40rpx;
			top: 10rpx;
			font-size: 22rpx;
		}
	}

	.zan {
		width: 80rpx;
	}

	.zan1 {
		position: absolute;
		top: 630rpx;
		right: 80rpx;
		z-index: 2;
	}

	.p4Video1 {
		position: absolute;
		z-index: 4;
		// width: 100vw;
		// height: 400rpx;
		// top: 400rpx;
		top: 440rpx;
		left: 80rpx;
		width: 340rpx;
		height: 230rpx;
	}

	.p4Video2 {
		position: absolute;
		z-index: 4;
		// width: 100vw;
		// height: 400rpx;
		top: 990rpx;
		right: 80rpx;
		width: 340rpx;
		height: 230rpx;
	}

	.zanNumBlock {
		position: absolute;
		top: 830rpx;
		left: 80rpx;
		z-index: 2;

		.heng1 {
			width: 190rpx;
			height: 10rpx;
			border-radius: 50rpx;
			background-color: #009A82;
			margin-left: 10rpx;
			margin-top: 20rpx;
		}

		.shuzi1 {
			color: #009A82;
			font-weight: 600;
			font-size: 40rpx;
		}

		.shuzi2 {
			color: #E8B100;
			margin-left: 10rpx;
			font-weight: 600;
			font-size: 40rpx;
		}

		.heng2 {
			width: 190rpx;
			height: 10rpx;
			border-radius: 50rpx;
			background-color: #E8B100;
			margin-left: 90rpx;
			margin-top: 20rpx;
		}
	}

	.zan2 {
		position: absolute;
		top: 988rpx;
		left: 80rpx;
		z-index: 2;
	}

	.pageItem {

		width: 100vw;
		min-height: 100vh;
	}

	.pageBg {
		position: absolute;
		width: 100vw;
	}

	.p3cBlock {
		position: relative;
		top: 220rpx;
		margin-left: 4vw;
		width: 92vw;

		.p3mItem {
			position: relative;
			width: 30vw;
			margin-right: 10rpx;
			z-index: 5;
		}
	}

	.p3centent {
		margin-top: -26rpx;
		width: 92vw;
		position: relative;
		z-index: 4;
		height: 960rpx;
		overflow-x: hidden;
		overflow-y: scroll;

		.p3cententImg {
			width: 92vw;
		}
	}

	.p2Video {
		position: absolute;
		top: 224rpx;
		left: 58rpx;
		width: 364rpx;
		height: 228rpx;
		z-index: 2;
	}
</style>

demo-slide-h5