uniapp项目实践总结(八)自定义加载组件

最新推荐文章于 2025-03-17 11:45:09 发布

JackieChan_

最新推荐文章于 2025-03-17 11:45:09 发布

阅读量378

点赞数 1

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/longxiaobao123/article/details/138566469

版权

在这里插入图片描述

<view
  class="q-loading"
  :style="{'backgroundColor': props.bgColor}"
  v-if="props.show"
>
  <view class="q-loading-inner">
    <slot name="load">
      <!-- 图标部分 -->
      <view
        :class="{'q-loading-icon': true, 'pause': !props.show && !props.showIcon}"
        v-if="props.showIcon"
      >
        <slot name="icon">
          <!-- 圆环 -->
          <view
            class="q-loading-item q-loading-circle"
            :style="{'width': props.borSize +'rpx', 'height': props.borSize +'rpx', 'borderWidth': props.borWin + 'rpx', 'borderColor': props.borColor, 'borderLeftColor': props.bordActiveColor}"
            v-if="props.iconName == 'circle'"
          >
          </view>
          <!-- 呼吸 -->
          <view
            class="q-loading-item q-loading-circle-breath"
            v-if="props.iconName == 'circle-breath'"
          >
          </view>
          <!-- 旋转 -->
          <view
            class="q-loading-item q-loading-circle-round"
            v-if="props.iconName == 'circle-round'"
          >
            <view
              class="loading-round"
              :style="{'backgroundColor': props.bordActiveColor}"
            ></view>
            <view
              class="loading-round"
              :style="{'backgroundColor': props.bordActiveColor}"
            ></view>
            <view
              class&