加载更多 转圈动画

 <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: '';  
   width: 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
)}

 

posted @ 2019-06-25 17:24  风一样的猿  阅读(389)  评论(0编辑  收藏  举报