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

Posted 2022-02-02 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>