上拉加载底部转圈圈动画并文字提示

<block>
    <view class="listFooterLoading" wx:if="{{loadStatus==1}}">
    <!-- 转圈圈 -->
      <view class="m-load2">
        <view class="line"><view></view><view></view><view></view><view></view><view></view><view></view></view>
        <view class="circlebg"></view>
      </view>
      <view class=‘load-word‘>加载中</view>
    </view>
    <text class="listFooter" wx:elif="{{loadStatus==2}}">没有更多数据了！</text>
    <text class="listFooter" wx:elif="{{loadStatus==-1}}">数据加载失败，请检查网络</text>
    <text class="listFooter" wx:elif="{{loadStatus==-2}}" >没有任何数据！</text>
</block>

.listFooter{
    color: #888888;
    background: #EFEFF4;
    display: block;
    text-align: center;
    width: 100%;
    font-size: 28rpx;
    height:104rpx;
    padding-top: 46rpx;
}
/* 加载中 */
.listFooterLoading{
    color: #888888;
    background: #EFEFF4;
    text-align: center;
    width: 100%;
    font-size: 28rpx;
    height:104rpx;
    padding-top: 46rpx;
    display: flex;
    justify-content: center;
}
.load-word{
  margin-left: 23rpx;
}
/************* 上拉加载的转圈圈 **************/
.m-load2{width:36rpx;height:36rpx;}
.m-load2{background:#EFEFF4;}
/** 加载动画的静态样式 **/
.m-load2{position:relative;}
.m-load2 .line view{position:absolute;left:16rpx;top:0;width:3rpx;height:36rpx;}
.m-load2 .line view:before,.m-load2 .line view:after{content:‘‘;display:block;height:50%;background:#96969C;border-radius:5rpx;}
.m-load2 .line view:nth-child(2){transform:rotate(30deg);}
.m-load2 .line view:nth-child(3){transform:rotate(60deg);}
.m-load2 .line view:nth-child(4){transform:rotate(90deg);}
.m-load2 .line view:nth-child(5){transform:rotate(120deg);}
.m-load2 .line view:nth-child(6){transform:rotate(150deg);}
.m-load2 .circlebg{position:absolute;left:50%;top:50%;width:18rpx;height:18rpx;margin:-9rpx 0 0 -9rpx;background:#EFEFF4;border-radius:18rpx;}
/** 加载动画 **/
@keyframes load{
    0%{opacity:0;}
    100%{opacity:1;}
}
.m-load2 .line view:nth-child(1):before{animation:load 1.2s linear 0s infinite;}
.m-load2 .line view:nth-child(2):before{animation:load 1.2s linear 0.1s infinite;}
.m-load2 .line view:nth-child(3):before{animation:load 1.2s linear 0.2s infinite;}
.m-load2 .line view:nth-child(4):before{animation:load 1.2s linear 0.3s infinite;}
.m-load2 .line view:nth-child(5):before{animation:load 1.2s linear 0.4s infinite;}
.m-load2 .line view:nth-child(6):before{animation:load 1.2s linear 0.5s infinite;}
.m-load2 .line view:nth-child(1):after{animation:load 1.2s linear 0.6s infinite;}
.m-load2 .line view:nth-child(2):after{animation:load 1.2s linear 0.7s infinite;}
.m-load2 .line view:nth-child(3):after{animation:load 1.2s linear 0.8s infinite;}
.m-load2 .line view:nth-child(4):after{animation:load 1.2s linear 0.9s infinite;}
.m-load2 .line view:nth-child(5):after{animation:load 1.2s linear 1s infinite;}
.m-load2 .line view:nth-child(6):after{animation:load 1.2s linear 1.1s infinite;}

wxml页面底部引入

<!-- 上拉加载提示状态 -->
<include src="/views/listFooter/listFooter.wxml"/>

根据js赋值 loadStatus ，来控制显示什么状态。

原文地址：https://www.cnblogs.com/XUYIYUAN/p/11407328.html