小程序全屏上下翻页带回弹

使用uniapp框架构建整屏翻页，仿抖音效整屏翻页效果，上翻或下翻到达一定临界值翻页，小于临界值，回弹复位。非 scroll-view非swiper

源码下载

html

<template>
	<view class="page">
		<view class=" container-fill">
			<view class="scroll-fullpage" @touchstart="scrollTouchstart" @touchmove="scrollTouchmove" @touchend="scrollTouchend"
			 :style="[{transform:'translateY(-'+scrollindex*100 +'vh)','margin-top': margintop+'px'}]">
				<view class="section section01 " :class="scrollindex==0?'active':''" style="background: #3399FF;">
					<text class="section-maintitle">页面1</text>
					<text class="section-subtitle">我的页面”1</text>
				</view>
				<view class="section section02 " :class="scrollindex==1?'active':''" style="background: #00CC66;">
					<text class="section-maintitle">页面2</text>
					<text class="section-subtitle">我的页面”2</text>
				</view>
				<view class="section section03 " :class="scrollindex==2?'active':''" style="background: #33CCCC;">
					<text class="section-maintitle">页面3</text>
					<text class="section-subtitle">我的页面”3</text>
				</view>
				<view class="section section04 " :class="scrollindex==3?'active':''" style="background: #6699FF;">
					<text class="section-maintitle">页面4</text>
					<text class="section-subtitle">我的页面”4</text>
				</view>
				<view class="section section05 " :class="scrollindex==4?'active':''" style="background: #9966FF;">
					<text class="section-maintitle">页面5</text>
					<text class="section-subtitle">我的页面”5</text>
				</view>
			</view>
		</view>
	</view>
</template>

scrip

	export default {
		data() {
			return {
				scrollindex: 0, //当前页面的索引值
				totalnum: 5, //总共页面数
				starty: 0, //开始的位置x
				endy: 0, //结束的位置y
				critical: 100, //触发翻页的临界值[可自定义]
				margintop: 0, //滑动下拉距离
			};
		},
		methods: {
			scrollTouchstart: function(e) {
				let py = e.touches[0].pageY;
				this.starty = py
				this.endy = py
			},
			scrollTouchmove: function(e) {
				let py = e.touches[0].pageY;
				this.endy = py
				if (py - this.starty < this.critical && py - this.starty > -this.critical) {
					this.margintop = py - this.starty
				}
			},
			scrollTouchend: function(e) {
				if (this.endy - this.starty > this.critical && this.scrollindex > 0) {
					this.scrollindex = this.scrollindex - 1

				} else if (this.endy - this.starty < -this.critical && this.scrollindex < this.totalnum - 1) {
					this.scrollindex = this.scrollindex + 1
				}
				this.start = 0,
				this.endy = 0,
				this.margintop = 0
			},
		}
	}

css

.container-fill {
		height: 100%;
		overflow: hidden;
		max-height: 100vh;
	}

	.scroll-fullpage {
		height: 100%;
		transition: all 0.3s;
	}

	.section {
		max-height: 100vh;
		height: 100vh;
		overflow-y: auto;
	}

	.section-maintitle {
		display: block;
		text-align: center;
		font-size: 50upx;
		color: #fff;
		font-weight: bold;
		letter-spacing: 10upx;
		padding-top: 240upx;
	}

	.section-subtitle {
		display: block;
		text-align: center;
		font-size: 40upx;
		color: #fff;
		font-weight: bold;
		letter-spacing: 10upx;
	}

	.active .section-maintitle,
	.active .section-subtitle {
		animation: mymove 0.8s;
	}

	@keyframes mymove {
		from {
			transform: translateY(-400upx) scale(0.5) rotateY(90deg);
		}

		to {
			transform: translateY(0) scale(1) rotateY(0);
		}
	}