zoukankan      html  css  js  c++  java
  • uniapp小程序上拉加载更多

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

    loading-css3.gif


    上代码:

    <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 {
             32px; height: 32px;
            background: url(../../static/images/home-img/loading-css3.gif);
        }
        /* IE10+以及其他 */
        .loading::after {
            content: '';
             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>
  • 相关阅读:
    Ceph相关
    Redis学习
    docker mysql
    WebSocket学习与使用
    nginx学习与使用
    python学习小记
    基数计数——HyperLogLog
    Swagger使用小记
    理解Java枚举类型
    Jenkins使用
  • 原文地址:https://www.cnblogs.com/tlfe/p/14972808.html
Copyright © 2011-2022 走看看