uniapp单页实现上滑下滑切换整屏页面

uniapp单页实现上滑下滑切换整屏页面

1. 效果图

2. 实现思路

1. 使用uni.createSelectorQuery()获取页面高度，设置swiper的高度

2. 使用touchstart和touchend事件获取滑动方向，使用swiper的current属性切换页面

3. 使用transition属性设置页面切换动画

3. 代码实现

3.1. 页面结构

<template>
  <view class="container"> 
     <view class="swiper" @change="swiperChange" @touchstart="touchStart" @touchend="touchEnd">
        <view :class="{ 'swiper-item': true, 'swiper-item-active': current === slides[0] }">
            <view class="scroll-view">
                <view class="slide" :style="{ height: '100vh' }">
                    <view class="content">
                       页面1
                    </view>
                </view>
            </view>
        </view> 
        <view :class="{ 'swiper-item': true, 'swiper-item-active': current === slides[1] }">
            <view class="scroll-view">
                <view class="slide" :style="{ height: '100vh' }">
                    <view class="content">
                       页面2
                    </view>
                </view>
            </view>
        </view> 
        <view :class="{ 'swiper-item': true, 'swiper-item-active': current === slides[2 }">
            <view class="scroll-view">
                <view class="slide" :style="{ height: '100vh' }">
                    <view class="content">
                       页面3
                    </view>
                </view>
            </view>
        </view> 
        ......

        <div class="down-arrow animate__animated animate__fadeIn" :class="classList[15]" @tap="goToPage(current)"> 
            <uni-icons type="forward" class="arrow arrow-top" size="40" color="#fff"></uni-icons>
            <uni-icons type="forward" class="arrow arrow-middle" size="40" color="#fff"></uni-icons>
            <uni-icons type="forward" class="arrow arrow-bottom" size="40" color="#fff"></uni-icons>
        </div>
</view>
</template>

3.2. 页面逻辑

<script> 
export default {
	data() {
		return {
			current: 0,
			slides: [0, 1, 2, 3, 4], // 示例数据
			startY: 0, // 手指触摸开始时的Y坐标
			endY: 0, // 手指触摸结束时的Y坐标
        };
	},
    swiperChange(e) {
        this.current = e.detail.current;
    },
    touchStart(e) {
        this.startY = e.touches[0].clientY; 
    },
    touchEnd(e) {
        this.endY = e.changedTouches[0].clientY;
        if( (275 < this.endY && this.endY < 555) && this.current == 4) {
            // 内容滚动区域禁止页面到上一页
            return;
        } 
        if (this.startY - this.endY > 50) {
            // 判断手指上滑的距离  
            this.current++; 
            if (this.current >= this.slides.length) {
                this.current = this.slides.length - 1; 
            }  
        } else {
            // 判断手指下滑的距离
            if (this.startY - this.endY < -50) {
                this.current--; 
                if (this.current < 0) {
                    this.current = 0; 
                } 
            }
        }
        if (this.current == 0) {
            this.outSlide = false;
        } else {
            this.outSlide = true;
        }
        console.log(this.current);
    },
    goToPage(index) { 
        this.current = index + 1;
    },
}

#### 3.3. 页面样式

```css
<style lang="scss">
    .swiper {
        height: 100vh;

        .swiper-item {
            display: none;

            &.swiper-item-active {
                display: block;
            }
        }
    }

    .slide {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-size: 24px;
        overflow: hidden; 
    }
    .scroll-view {
        white-space: nowrap;
    }
</style>