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

Posted 2022-08-23 xuyiyuan

<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-load2width:36rpx;height:36rpx;
.m-load2background:#EFEFF4;
/** 加载动画的静态样式 **/
.m-load2position:relative;
.m-load2 .line viewposition:absolute;left:16rpx;top:0;width:3rpx;height:36rpx;
.m-load2 .line view:before,.m-load2 .line view:aftercontent:‘‘;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 .circlebgposition: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):beforeanimation:load 1.2s linear 0s infinite;
.m-load2 .line view:nth-child(2):beforeanimation:load 1.2s linear 0.1s infinite;
.m-load2 .line view:nth-child(3):beforeanimation:load 1.2s linear 0.2s infinite;
.m-load2 .line view:nth-child(4):beforeanimation:load 1.2s linear 0.3s infinite;
.m-load2 .line view:nth-child(5):beforeanimation:load 1.2s linear 0.4s infinite;
.m-load2 .line view:nth-child(6):beforeanimation:load 1.2s linear 0.5s infinite;
.m-load2 .line view:nth-child(1):afteranimation:load 1.2s linear 0.6s infinite;
.m-load2 .line view:nth-child(2):afteranimation:load 1.2s linear 0.7s infinite;
.m-load2 .line view:nth-child(3):afteranimation:load 1.2s linear 0.8s infinite;
.m-load2 .line view:nth-child(4):afteranimation:load 1.2s linear 0.9s infinite;
.m-load2 .line view:nth-child(5):afteranimation:load 1.2s linear 1s infinite;
.m-load2 .line view:nth-child(6):afteranimation:load 1.2s linear 1.1s infinite;

 

wxml页面底部引入 

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

 

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