小程序自定义实现loading

时间：2024-02-16 10:39:16

哈哈哈  写组件的时候忘记配置组件名称，意外发现了小程序自带了loading组件

<loading>{{正在加载...}}</loading> //内容也是可自定义的

效果图：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~这是自定义组件实现的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、自定义实现效果图：

二、代码实现：

1.loading 组件的view实<!-- loading开始 -->

      <view class="loading" wx:if="{{loadingFlag}}">
        <view class="loading_mask"></view>
        <view class="weui-loadmore">
          <view class="weui-loading"></view>
          <text class="weui-loadmore__tips">正在加载</text>
        </view>
     </view>
       <!-- loading结束 -->

调用的页面组件实现：
 配置：
      {"usingComponents": {"com-loading":"../component/comLoading/loading"}}
   调用的页面调用：(可以自定义加载时的文字显示)
     <com-loading pro-content="正在加载"></com-loading>

2.组件js:

properties: {
    proContent:{
      type:String,
      value:"正在加载..."
    },
  },

 

3.css样式

/* loading样式开始 */
.loading{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.loading_mask{
  position: absolute;
  width: 45%;
  margin: 14em 22.5%;
  height: 2.6em;
  border-radius: 20rpx;
  background: #000;
  opacity: .5;
}
.weui-loadmore {
  position: absolute;
  width: 45%;
  margin: 16em 22.5%;
  line-height: 2.6em;
  font-size: 14px;
  color: #fff;
  text-align: center;
}
.weui-icon_toast.weui-loading{
  margin:30px 0 0;
  width:38px;
  height:38px;
  vertical-align:baseline;
}
.weui-loading{
    width:20px;
    height:20px;
    display:inline-block;
    vertical-align:middle;
    -webkit-animation:weuiLoading 1s steps(12, end) infinite;
    animation:weuiLoading 1s steps(12, end) infinite;
    background:transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'120\' height=\'120\' viewBox=\'0 0 100 100\'%3E%3Cpath fill=\'none\' d=\'M0 0h100v100H0z\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23E9E9E9\' rx=\'5\' ry=\'5\' transform=\'translate(0 -30)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23989697\' rx=\'5\' ry=\'5\' transform=\'rotate(30 105.98 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%239B999A\' rx=\'5\' ry=\'5\' transform=\'rotate(60 75.98 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23A3A1A2\' rx=\'5\' ry=\'5\' transform=\'rotate(90 65 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23ABA9AA\' rx=\'5\' ry=\'5\' transform=\'rotate(120 58.66 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23B2B2B2\' rx=\'5\' ry=\'5\' transform=\'rotate(150 54.02 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23BAB8B9\' rx=\'5\' ry=\'5\' transform=\'rotate(180 50 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23C2C0C1\' rx=\'5\' ry=\'5\' transform=\'rotate(-150 45.98 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23CBCBCB\' rx=\'5\' ry=\'5\' transform=\'rotate(-120 41.34 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23D2D2D2\' rx=\'5\' ry=\'5\' transform=\'rotate(-90 35 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23DADADA\' rx=\'5\' ry=\'5\' transform=\'rotate(-60 24.02 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'%23E2E2E2\' rx=\'5\' ry=\'5\' transform=\'rotate(-30 -5.98 65)\'/%3E%3C/svg%3E") no-repeat;
    background-size:100%;
  }
  .weui-loading.weui-loading_transparent,
  .weui-btn_loading.weui-btn_primary .weui-loading,
  .weui-btn_loading.weui-btn_warn .weui-loading{
    background-image:url("data:image/svg+xml;charset=utf8, %3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'120\' height=\'120\' viewBox=\'0 0 100 100\'%3E%3Cpath fill=\'none\' d=\'M0 0h100v100H0z\'/%3E%3Crect xmlns=\'http://www.w3.org/2000/svg\' width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.56)\' rx=\'5\' ry=\'5\' transform=\'translate(0 -30)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.5)\' rx=\'5\' ry=\'5\' transform=\'rotate(30 105.98 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.43)\' rx=\'5\' ry=\'5\' transform=\'rotate(60 75.98 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.38)\' rx=\'5\' ry=\'5\' transform=\'rotate(90 65 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.32)\' rx=\'5\' ry=\'5\' transform=\'rotate(120 58.66 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.28)\' rx=\'5\' ry=\'5\' transform=\'rotate(150 54.02 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.25)\' rx=\'5\' ry=\'5\' transform=\'rotate(180 50 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.2)\' rx=\'5\' ry=\'5\' transform=\'rotate(-150 45.98 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.17)\' rx=\'5\' ry=\'5\' transform=\'rotate(-120 41.34 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.14)\' rx=\'5\' ry=\'5\' transform=\'rotate(-90 35 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.1)\' rx=\'5\' ry=\'5\' transform=\'rotate(-60 24.02 65)\'/%3E%3Crect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.03)\' rx=\'5\' ry=\'5\' transform=\'rotate(-30 -5.98 65)\'/%3E%3C/svg%3E");
  }
  @-webkit-keyframes weuiLoading{
    0%{
    -webkit-transform:rotate3d(0, 0, 1, 0deg);
        transform:rotate3d(0, 0, 1, 0deg);
    }
    100%{
    -webkit-transform:rotate3d(0, 0, 1, 360deg);
        transform:rotate3d(0, 0, 1, 360deg);
    }
  }
  @keyframes weuiLoading{
    0%{
    -webkit-transform:rotate3d(0, 0, 1, 0deg);
        transform:rotate3d(0, 0, 1, 0deg);
    }
    100%{
    -webkit-transform:rotate3d(0, 0, 1, 360deg);
        transform:rotate3d(0, 0, 1, 360deg);
    }
  }
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
  color: rgba(0,0,0,0.9);
  color: var(--weui-FG-0);
}

相关文章