uni-app实现fullPage.js的整页翻页的效果

Posted 2021-09-05 lkisgeek

使用scroll-view组件的scroll-into-view实现。监听用户触摸状态判断上下。同理也可设计左右slide模式。

<template>
	<view class="page">
		<scroll-view scroll-y="true" :scroll-into-view="toView" class="scroll-view" :scroll-with-animation="true">
			<view id="page1" @touchmove="switchPage"
			@touchstart="startTouch" @touchend="endTouch">
				page1
			</view>
			<view id="page2" @touchmove="switchPage"
			@touchstart="startTouch" @touchend="endTouch">
				page2
			</view>
			<view id="page3" @touchmove="switchPage"
			@touchstart="startTouch" @touchend="endTouch">
				page3
			</view>
			<view id="page4" @touchmove="switchPage"
			@touchstart="startTouch" @touchend="endTouch">
				page4
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toView: '',
				startY: 0,
				pageIndex: 1,
				type: 0
			}
		},
		onLoad() {

		},
		methods: {
			switchPage: function(event) {
				event.preventDefault()
				var moveEndY = event.changedTouches[0].pageY
				var Y = moveEndY - this.startY
				if (Y > 0) {
					this.type = 1
				} else {
					this.type = 2
				}
			},
			startTouch: function(event) {
				// 记录点击坐标
				this.startY = event.changedTouches[0].pageY
			},
			endTouch: function(event) {
				if (this.type === 1 && this.pageIndex > 1) {
					// 上一页
					this.pageIndex--
					this.$nextTick(function() {
						this.toView = 'page' + this.pageIndex
					})
				} else if(this.type === 2 && this.pageIndex <4){
					// 下一页
					this.pageIndex++
					this.$nextTick(function() {
						this.toView = 'page' + this.pageIndex
					})
				}
			}
		}
	}
</script>

<style>
	.scroll-view {
		height: 100vh;
	}
</style>