uni-app 上拉加載跳轉頁面

上拉觸底生命周期：onReachBottom
具體實現：
模擬加載組件：

<template>
    <view class="uni-load-more">
        <view v-show="status === 'loading' && showIcon" class="uni-load-more__img">
            <view class="load1 load">
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
            </view>
            <view class="load2 load">
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
            </view>
            <view class="load3 load">
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
                <view :style="{ background: color }" class="uni-load-view_wrapper" />
            </view>
        </view>
        <text :style="{ color: color }" class="uni-load-more__text">
            {{ status === 'more' ? contentText.contentdown : status === 'loading' ? contentText.contentrefresh : contentText.contentnomore }}
        </text>
    </view>
</template>
<script>
    export default {
        name: 'UniLoadMore',
        props: {
            status: {
                // 上拉的狀態(tài)：more-loading前；loading-loading中延曙；noMore-沒有更多了
                type: String,
                default: 'more'
            },
            showIcon: {
                type: Boolean,
                default: true
            },
            color: {
                type: String,
                default: '#777777'
            },
            contentText: {
                type: Object,
                default () {
                    return {
                        contentdown: '上拉顯示更多',
                        contentrefresh: '正在加載...',
                        contentnomore: '沒有更多數據了'
                    }
                }
            }
        }
    }
</script>

<style>
    @charset "UTF-8";

    .uni-load-more {
        display: flex;
        flex-direction: row;
        height: 80upx;
        align-items: center;
        justify-content: center
    }
    .uni-load-more__text {
        font-size: 20rpx;
        color: #333333;
        font-family: 'DINOT-REGULAR';
    }
    .uni-load-more__img {
        height: 24px;
        width: 24px;
        margin-right: 10px
    }
    .uni-load-more__img>.load {
        position: absolute
    }
    .uni-load-more__img>.load .uni-load-view_wrapper {
        width: 6px;
        height: 2px;
        border-top-left-radius: 1px;
        border-bottom-left-radius: 1px;
        background: #999;
        position: absolute;
        opacity: .2;
        transform-origin: 50%;
        animation: load 1.56s ease infinite
    }
    .uni-load-more__img>.load .uni-load-view_wrapper:nth-child(1) {
        transform: rotate(90deg);
        top: 2px;
        left: 9px
    }

    .uni-load-more__img>.load .uni-load-view_wrapper:nth-child(2) {
        transform: rotate(180deg);
        top: 11px;
        right: 0
    }
    .uni-load-more__img>.load .uni-load-view_wrapper:nth-child(3) {
        transform: rotate(270deg);
        bottom: 2px;
        left: 9px
    }
    .uni-load-more__img>.load .uni-load-view_wrapper:nth-child(4) {
        top: 11px;
        left: 0
    }
    .load1,
    .load2,
    .load3 {
        height: 24px;
        width: 24px
    }
    .load2 {
        transform: rotate(30deg)
    }
    .load3 {
        transform: rotate(60deg)
    }
    .load1 .uni-load-view_wrapper:nth-child(1) {
        animation-delay: 0s
    }
    .load2 .uni-load-view_wrapper:nth-child(1) {
        animation-delay: .13s
    }
    .load3 .uni-load-view_wrapper:nth-child(1) {
        animation-delay: .26s
    }
    .load1 .uni-load-view_wrapper:nth-child(2) {
        animation-delay: .39s
    }
    .load2 .uni-load-view_wrapper:nth-child(2) {
        animation-delay: .52s
    }
    .load3 .uni-load-view_wrapper:nth-child(2) {
        animation-delay: .65s
    }

    .load1 .uni-load-view_wrapper:nth-child(3) {
        animation-delay: .78s
    }

    .load2 .uni-load-view_wrapper:nth-child(3) {
        animation-delay: .91s
    }
    .load3 .uni-load-view_wrapper:nth-child(3) {
        animation-delay: 1.04s
    }
    .load1 .uni-load-view_wrapper:nth-child(4) {
        animation-delay: 1.17s
    }
    .load2 .uni-load-view_wrapper:nth-child(4) {
        animation-delay: 1.3s
    }

    .load3 .uni-load-view_wrapper:nth-child(4) {
        animation-delay: 1.43s
    }
    @-webkit-keyframes load {
        0% {
            opacity: 1
        }

        100% {
            opacity: .2
        }
    }
</style>

引用：

<uni-load-more :status="status" :color="loadingcolor" :content-text="contentText" v-if="loading"/>

import uniLoadMore from '../../component/uni-load-more.vue'

data() {
    return {
        status:'',
        loadingcolor:'#006B69',
        contentText: {
            contentrefresh: '',
            contentnomore: 'Reached the bottom of the page, pull up to load the next page'
        },
        loading:false,
        toustrart:0,
        touend:0,
        bottoms:false,
        bot:false
    }
},

components:{
    uniLoadMore
}

上拉加載，跳轉下一頁實現：

第一步：觸底時今穿，給一個提示,到達頁面底部

onReachBottom(){
    this.loading=true
    this.status='noMore'
    this.loadingcolor="#777777";
    this.bottoms = true;
    console.log('onreachbottom')
},

第二步：實現上拉坯汤，主要利用手指進行上拉動作時，開始和結束的距離判斷
具體實現：

touchstart(event){
    this.toustrart = event.touches[0].clientY
},
touchmove(event){
    let  tag = event.touches;
    this.touend = tag[0].clientY
},
touchend(){
        if(this.toustrart - this.touend < 0){
        this.bottoms = false
    }
    if(this.bottoms){
        if(this.toustrart - this.touend > 50){
            this.loading=true
            this.status='loading'
            this.loadingcolor="#777777";
            var self = this
            setTimeout(function(){
                uni.navigateTo({
                     url: '../points/points'
                });
                self.status = 'noMore'
            },1000)
        }
    }
                
}

第三步陪汽，頁面初始化時训唱，給this.toustrart 和 this.touend清零褥蚯，防止返回時還存在挚冤，點擊就能跳轉

onShow() {
    this.toustrart = 0;
    this.touend = 0;
},