zoukankan      html  css  js  c++  java
  • 加载更多 转圈动画

     <view class="loading" hidden="{{!searchLoading}}">
        <image src='../../images/jiazai.png'></image>
        正在载入更多...</view>
    .loading{  
      padding: 10rpx;  
        text-align: center;  
        display: flex;
        justify-content: center;
        font-size: 28rpx;
        color: #d3d3d3;
      } 
    
      .loading image{  
       display:block;  
       margin-right: 5rpx;  
    animation: a 1s steps(12) infinite;
       content: '';  
        40rpx;  
       height: 40rpx;  
       background-size: contain;  
     }  
    
     @keyframes a {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
    }
    }
     .loading.complete:before{  
       display: none;  
     } 
    data{
        searchLoading: false, //"上拉加载"的变量,默认false,隐藏  
        searchLoadingComplete: false  //“没有数据”的变量,默认false,隐藏 }
    this.setData({
    searchLoading:true
    )}
  • 相关阅读:
    【shell】 for循环
    【shell】case语句
    【shell】if语句
    【shell】nmap工具的使用
    spring3 循环依赖
    spring3 DI基础
    spring3系列一
    正则表达式学习网址
    常用正则表达式
    hibernate延迟加载
  • 原文地址:https://www.cnblogs.com/wangshishuai/p/11084035.html
Copyright © 2011-2022 走看看