编程语言
首页 > 编程语言> > uniapp小程序上拉加载更多

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