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

Posted lkisgeek

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app实现fullPage.js的整页翻页的效果相关的知识,希望对你有一定的参考价值。

使用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>

以上是关于uni-app实现fullPage.js的整页翻页的效果的主要内容,如果未能解决你的问题,请参考以下文章

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

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

整页滚动插件(fullPage.js、scrollify.js 等)阻止默认的移动 Safari UI 行为

jsp实现上一页下一页翻页功能

Vim翻页控制命令详解

php网页上一页下一页翻页