uniapp小程序上拉加载更多

uni-app和微信小程序提供了下拉刷新的加载loading，但是上拉刷新没有提供loading加载动画
现在我们就自己写一个上拉加载更多的时候加载loading动画
上代码：

<template>
    <view class="">
        <u-button type="success" @click="btn">成功按钮</u-button>
　　　　　　
　　　　　//假设这中间有很多内容，自己脑补

        <u-button type="success" @click="btn">成功按钮</u-button>
　　　　　//自己写的loading加载
        <view class="empty">
            <text v-if="!open" class="meiy-empty">没有更多数据了~</text>
            <div v-else class="loading spin"></div>
        </view>
    </view>
</template>

data() {
            return {
                open:false
            }
        },
        methods: {
            onPullDownRefresh(){
                console.log('下拉刷新','-----')
            },
            onReachBottom(){
　　　　　　　　　　//上拉加载更多
                this.open = true
                
                // setTimeout(()=>{
                //     uni.stopPullDownRefresh();
                //     this.open = false
                // },2000)
                
            },
}

<style lang="scss">
    
    .spin {
        -webkit-transform: rotate(360deg);
        -webkit-animation: spin 2s linear infinite; 
    }
    @-webkit-keyframes spin {
        from {-webkit-transform: rotate(0deg);}
          to {-webkit-transform: rotate(360deg);}
    }
    .spin {
        transform: rotate(360deg);
        animation: spin 2s linear infinite;
    }
    @keyframes spin {
        from {transform: rotate(0deg);}
          to {transform: rotate(360deg);}
    }
    
    
    /* 所有浏览器实现实现 */
    .loading {
        width: 32px; height: 32px;
        background: url(../../static/images/home-img/loading-css3.gif);
    }
    /* IE10+以及其他 */
    .loading::after {
        content: '';
        width: 3px; height:3px;
        margin: 14.5px 0 0 14.5px;
        border-radius: 100%; /* 圆角 */
        position: absolute;
    }
    .empty{
        display: flex;
        justify-content: center;
        .meiy-empty{
            font-size:22rpx;
            color: #C0C0C0;
            text-align: center;
            margin: 20rpx;
        }
    }
</style>

标签：uniapp,rotate,transform,loading,上拉,webkit,spin,加载
来源： https://www.cnblogs.com/tlfe/p/14972808.html