加载更多 转圈动画
<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 )}