uniapp整屏滑动

人狠话不多，直接上图、上代码

 

 

 

 

HTML

<view class="page">
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <!-- page1 -->
                    <swiper class="swiper" vertical="true">
                        <swiper-item>
                            <view class="swiper-item ">
                                第一页
                            </view>
                            <image src="../../static/img/icon/xiala.gif" class="xiala_img"></image>
                        </swiper-item>
                        <!-- page2 -->
                        <swiper-item>
                            <view class="swiper-item ">
                                第二页
                            </view>
                            <image src="../../static/img/icon/xiala.gif" mode="" class="xiala_img"></image>
                        </swiper-item>
                        <!-- page3 -->
                        <swiper-item>
                            <view class="swiper-item ">
                                最后一页
                            </view>
                            <view class="noMorePages">
                                您已看到最后一页！
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>

 

CSS

 

.page {
        width: 100%;
        height: 100vh;
    }

    .uni-padding-wrap {
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .swiper {
        width: 100%;
        height: 90vh;
    }

    .xiala_img {
        height: 56upx;
        width: 56upx;
        position: absolute;
        bottom: 10upx;
        left: 338upx;
    }

    .noMorePages {
        width: 100%;
        text-align: center;
        height: 56upx;
        line-height: 56upx;
        position: absolute;
        bottom: 10upx;
        color: #333;
    }

 

 

下拉动效图