如何优雅的实现上拉动态加载呢？

这里采用的是把组件注入到全局的方式，因为这个查询列表的时候都需要用到的...

使用状态的方式控制加载时是否需要提示，提示什么...

 

1.新增组件 pull-down-loading.vue(在components包下)

<template>
    <view class="load-main">
        <!-- 转圈圈 -->
        <view class="m-load" v-if="loadingType == 1">
            <view class="line">
                <view></view>
                <view></view>
                <view></view>
                <view></view>
                <view></view>
                <view></view>
            </view>
            <view class="circlebg"></view>
        </view>
        <!-- 加载文本 -->
        <view class="load-text-tips">
            <text class="loading-text" v-if="loadingType == 0">{{ contentText.contentdown }}</text>
            <text class="loading-text" v-if="loadingType == 1">{{ contentText.contentrefresh }}</text>
            <text class="loading-text" v-if="loadingType == 2">{{ contentText.contentnomore }}</text>
            <text class="loading-text" v-if="loadingType == 3">{{ contentText.noDataprompts }}</text>
            <text class="loading-text" v-if="loadingType == 4"></text>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        loadingType: {
            type: Number,
            default: 4
        }
    },
    data() {
        return {
            contentText: {
                contentdown: '上拉显示更多',
                contentrefresh: '加载中...',
                contentnomore: '~没有更多数据了~',
                noDataprompts: '~暂无数据~'
            }
        };
    }
};
</script>

<style>
/*------------- 加载begin -------------*/
.load-main {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.load-text-tips {
    margin-left: 10rpx;
}
.loading-text {
    height: 80upx;
    line-height: 150upx;
    font-size: 30upx;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 30rpx;
    color: #bcbcbc;
}

/* 上拉加载的转圈圈 */
.m-load {
    width: 36rpx;
    height: 36rpx;
}
.m-load {
    background: #efeff4;
}
/** 加载动画的静态样式 **/
.m-load {
    position: relative;
}
.m-load .line view {
    position: absolute;
    left: 16rpx;
    top: 0;
    width: 3rpx;
    height: 36rpx;
}
.m-load .line view:before,
.m-load .line view:after {
    content: '';
    display: block;
    height: 50%;
    background: #96969c;
    border-radius: 5rpx;
}
.m-load .line view:nth-child(2) {
    transform: rotate(30deg);
}
.m-load .line view:nth-child(3) {
    transform: rotate(60deg);
}
.m-load .line view:nth-child(4) {
    transform: rotate(90deg);
}
.m-load .line view:nth-child(5) {
    transform: rotate(120deg);
}
.m-load .line view:nth-child(6) {
    transform: rotate(150deg);
}
.m-load .circlebg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18rpx;
    height: 18rpx;
    margin: -9rpx 0 0 -9rpx;
    background: #efeff4;
    border-radius: 18rpx;
}
/** 加载动画 **/
@keyframes load {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.m-load .line view:nth-child(1):before {
    animation: load 1.2s linear 0s infinite;
}
.m-load .line view:nth-child(2):before {
    animation: load 1.2s linear 0.1s infinite;
}
.m-load .line view:nth-child(3):before {
    animation: load 1.2s linear 0.2s infinite;
}
.m-load .line view:nth-child(4):before {
    animation: load 1.2s linear 0.3s infinite;
}
.m-load .line view:nth-child(5):before {
    animation: load 1.2s linear 0.4s infinite;
}
.m-load .line view:nth-child(6):before {
    animation: load 1.2s linear 0.5s infinite;
}
.m-load .line view:nth-child(1):after {
    animation: load 1.2s linear 0.6s infinite;
}
.m-load .line view:nth-child(2):after {
    animation: load 1.2s linear 0.7s infinite;
}
.m-load .line view:nth-child(3):after {
    animation: load 1.2s linear 0.8s infinite;
}
.m-load .line view:nth-child(4):after {
    animation: load 1.2s linear 0.9s infinite;
}
.m-load .line view:nth-child(5):after {
    animation: load 1.2s linear 1s infinite;
}
.m-load .line view:nth-child(6):after {
    animation: load 1.2s linear 1.1s infinite;
}
/*------------- 加载end -------------*/
</style>

 

2.把组件注入到全局(main.js)

import pullDownLoading from "components/loading/pull-down-loading.vue";
Vue.component('pull-down-loading', pullDownLoading);

 

3.使用组件(在需要用到的页面中使用该组件)

<!-- 下拉动态加载 -->
<pull-down-loading :loadingType="loadingType"></pull-down-loading>

 

记得在使用页面的data中定义loadingType的默认值

// 加载状态 0:上拉显示更多 1:加载中 2:没有更多数据 3:没数据提示 4:不显示
loadingType: 4,

 

然后你在请求的开头、结尾，根据自己的需求定义loadingType。

定义值loadingType思路(分页查询)

1.在请求头定义loadingType为1，成功拿到数据后判断总条数是否相等，如果相等定义为2。

2.接着l将oadingType归为0，在下拉分页加载时判断下，如果loadingType不为0，说明它没有下一页了，执行停止。

3.在下拉加载时也需要判断下条数是否详情，如果相等，同样定义为2，否则定义为0。

 

4.效果图

 

 

 是动画来着